/* =============================================================
   TANAI — site styles on top of the theme.
   Theme palette kept as-is: #1f272b dark, #f5a425 amber, white.
   Everything below either fixes a template quirk or adds a
   component the engineering content needs.
   ============================================================= */

:root{
  --ink:#1f272b;
  --ink-2:#2a343a;
  --amber:#f5a425;
  --amber-dk:#d98c14;
  --red:#a12c2f;
  --grey:#f7f7f7;
  --grey-2:#eef1f3;
  --line:#dde3e7;
  --text:#3b4448;
  --muted:#6d777c;
}

body{ font-family:'Poppins',sans-serif; color:var(--text); }

.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--amber);
  color:var(--ink);padding:12px 20px;text-decoration:none;font-weight:600}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- header ---------- */
.header-area .main-nav .logo{ padding:0; line-height:0; display:flex; align-items:center; height:80px; }
.header-area .main-nav .logo img{ width:130px; height:auto; }
.background-header .main-nav .logo img{ filter:brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(1200%) hue-rotate(155deg); }
.header-area .main-nav .nav li a.active{ color:var(--amber) !important; }
.header-area .main-nav .nav .sub-menu li a strong{ font-weight:700; }
.header-area .main-nav .nav li.has-sub ul.sub-menu{ min-width:230px; }

/* ---------- home hero ---------- */
.main-banner .caption .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--amber); padding:6px 14px; margin-bottom:22px; font-weight:600;
}

/* ---------- capability band ---------- */
.capability-band{ background:var(--ink-2); padding:70px 0; }
.capability-band h5{ color:#fff; font-weight:400; line-height:1.7; opacity:.9; }
.capability-band .cap-item{
  border:1px solid rgba(255,255,255,.14); padding:22px 18px; height:100%;
  transition:background .2s, border-color .2s; text-decoration:none; display:block;
}
.capability-band .cap-item:hover{ background:rgba(245,164,37,.10); border-color:var(--amber); }
.capability-band .cap-item i{ color:var(--amber); font-size:22px; margin-bottom:12px; display:block; }
.capability-band .cap-item h4{ color:#fff; font-size:16px; font-weight:600; margin:0; }

/* ---------- section furniture ---------- */
.section-pad{ padding:100px 0; }
.section-pad-sm{ padding:70px 0; }
.bg-grey{ background:var(--grey); }
.bg-grey-2{ background:var(--grey-2); }
.section-heading h2{ font-size:36px; font-weight:700; color:var(--ink); line-height:1.3; }
.section-heading .eyebrow{
  display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); font-weight:600; margin-bottom:12px;
}
.section-heading p{ color:var(--muted); max-width:64ch; margin-top:14px; }

/* ---------- cards ---------- */
.t-card{
  background:#fff; border:1px solid var(--line); height:100%; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.t-card:hover{ transform:translateY(-5px); box-shadow:0 16px 40px -18px rgba(31,39,43,.35); border-color:var(--amber); }
.t-card .media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.t-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.t-card:hover .media img{ transform:scale(1.06); }
.t-card .media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(31,39,43,.55) 100%); }
.t-card .badge-code{
  position:absolute; z-index:2; top:14px; left:14px; background:var(--amber); color:var(--ink);
  font-size:11px; letter-spacing:.1em; font-weight:700; padding:5px 11px; text-transform:uppercase;
}
.t-card .body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.t-card .body h4{ font-size:19px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.t-card .body p{ font-size:14.5px; color:var(--muted); line-height:1.65; margin:0; }
.t-card .more{ margin-top:auto; padding-top:16px; color:var(--amber); font-weight:600;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- alternating feature rows ---------- */
.feature-row{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-bottom:80px; }
.feature-row:last-child{ margin-bottom:0; }
.feature-media{ position:relative; }
.feature-media img{ width:100%; aspect-ratio:3/2; object-fit:cover; position:relative;
  z-index:1; display:block; max-height:430px; }
.feature-media::before{ content:""; position:absolute; left:-18px; bottom:-18px;
  width:100%; height:100%; background:var(--amber); opacity:.18; z-index:0; }
.feature-row.reverse .feature-media::before{ left:auto; right:-18px; }
.feature-tag{ position:absolute; z-index:2; top:22px; left:0; background:var(--ink); color:#fff;
  font-size:11px; letter-spacing:.14em; padding:8px 16px; text-transform:uppercase; font-weight:600; }
.feature-row.reverse .feature-tag{ left:auto; right:0; }
.feature-body h2{ font-size:32px; font-weight:700; color:var(--ink); margin-bottom:18px; }
.feature-body p{ color:var(--muted); line-height:1.75; }
.feature-list{ list-style:none; padding:0; margin:22px 0 28px; }
.feature-list li{ position:relative; padding-left:28px; margin-bottom:10px; color:var(--text); }
.feature-list li::before{ content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:0; top:2px; color:var(--amber); font-size:13px; }

/* ---------- stats ---------- */
.stats-band{ background:var(--ink); padding:80px 0; }
.stat{ text-align:center; color:#fff; }
.stat .num{ font-size:52px; font-weight:800; color:var(--amber); line-height:1; }
.stat .label{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-top:12px; }

/* ---------- page banner ---------- */
.page-banner{ position:relative; background-size:cover; background-position:center;
  padding:190px 0 90px; color:#fff; display:block; }
.page-banner-overlay{ position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(31,39,43,.95) 0%,rgba(31,39,43,.86) 45%,rgba(31,39,43,.62) 100%); }
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ font-size:42px; font-weight:700; color:#fff; margin:0 0 14px; max-width:20ch; }
.page-banner p{ color:rgba(255,255,255,.86); max-width:62ch; margin:0; font-size:17px; line-height:1.65; }
.page-crumbs{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-wrap:wrap; gap:8px;
  font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.65); }
.page-crumbs a{ color:rgba(255,255,255,.65); text-decoration:none; }
.page-crumbs a:hover{ color:var(--amber); }
.page-crumbs li::after{ content:"/"; margin-left:8px; opacity:.5; }
.page-crumbs li:last-child::after{ display:none; }
.page-crumbs li[aria-current]{ color:#fff; }

/* ---------- article ---------- */
.article-body{ font-size:16.5px; line-height:1.85; }
.article-body h2{ font-size:28px; font-weight:700; color:var(--ink); margin:44px 0 18px; }
.article-body h3{ font-size:21px; font-weight:600; color:var(--ink); margin:32px 0 14px; }
.article-body p{ margin-bottom:18px; color:var(--text); }
.article-body ul{ list-style:none; padding:0; margin:0 0 24px; }
.article-body ul li{ position:relative; padding-left:28px; margin-bottom:11px; }
.article-body ul li::before{ content:""; position:absolute; left:0; top:12px;
  width:12px; height:2px; background:var(--amber); }
.article-body .lead-img{ margin:0 0 34px; }
.article-body .lead-img img{ width:100%; height:auto; display:block; }

/* ---------- sidebar ---------- */
.side-box{ background:#fff; border:1px solid var(--line); padding:26px; margin-bottom:24px; }
.side-box h4{ font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:18px; }
.side-box ul{ list-style:none; padding:0; margin:0; }
.side-box li{ margin-bottom:11px; }
.side-box a{ color:var(--text); text-decoration:none; font-size:15px; }
.side-box a:hover{ color:var(--amber); }
.side-box a.current{ color:var(--amber); font-weight:600; }
.side-cta{ background:var(--ink); border-color:var(--ink); }
.side-cta h4{ color:#fff; font-size:20px; text-transform:none; letter-spacing:0; font-weight:700; }
.side-cta p{ color:rgba(255,255,255,.75); font-size:14.5px; }

/* ---------- contact ---------- */
.contact-card{ background:#fff; border:1px solid var(--line); padding:34px; }
.contact-card .row-item{ display:flex; gap:16px; margin-bottom:24px; }
.contact-card .row-item i{ color:var(--amber); font-size:19px; width:24px; flex:none; margin-top:4px; }
.contact-card .row-item strong{ display:block; color:var(--ink); margin-bottom:3px; }
.contact-card a{ color:var(--text); text-decoration:none; }
.contact-card a:hover{ color:var(--amber); }
.t-form .form-control{ border-radius:0; border:1px solid var(--line); padding:14px 16px;
  font-size:15.5px; margin-bottom:16px; box-shadow:none; }
.t-form .form-control:focus{ border-color:var(--amber); box-shadow:none; }
.t-form textarea.form-control{ min-height:150px; resize:vertical; }
.t-alert{ padding:16px 20px; margin-bottom:24px; border-left:4px solid #2f9e6b; background:#eef8f2; }
.t-alert.is-error{ border-left-color:var(--red); background:#fbf0f1; }
.t-hp{ position:absolute; left:-9999px; }
.map-frame{ width:100%; height:340px; border:1px solid var(--line); display:block; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--amber); padding:52px 0; }
.cta-band h3{ color:var(--ink); font-weight:700; font-size:28px; margin:0 0 6px; }
.cta-band p{ color:rgba(31,39,43,.82); margin:0; }
.cta-band .main-button-yellow div a{ background:var(--ink); color:#fff; }
.cta-band .main-button-yellow div a:hover{ background:#000; }

/* ---------- footer ---------- */
footer.bg-dark{ background:var(--ink) !important; }
footer .text-footer{ color:rgba(255,255,255,.62); text-decoration:none; font-size:14.5px; }
footer .text-footer:hover{ color:var(--amber); }
footer .text-footer-plain{ color:rgba(255,255,255,.62); font-size:14.5px; line-height:1.7; }
footer .text-footer-intro{ color:rgba(255,255,255,.62); font-size:14.5px; line-height:1.75; }
footer h6{ letter-spacing:.1em; font-size:13px; text-transform:uppercase; }
footer p{ margin-bottom:9px; }
.footer-social a{ color:rgba(255,255,255,.7); margin-right:14px; font-size:17px; }
.footer-social a:hover{ color:var(--amber); }
.footer-bottom{ background:rgba(0,0,0,.28); color:rgba(255,255,255,.55); font-size:13.5px; }

/* ---------- buttons ---------- */
.main-button-yellow div a,
.main-button-red div a{ border-radius:0; font-weight:600; letter-spacing:.03em; }

/* ---------- responsive ---------- */
@media (max-width:991px){
  .main-banner .caption h2{ font-size:34px; }
  .section-pad{ padding:70px 0; }
  .page-banner{ padding:150px 0 70px; }
  .page-banner h1{ font-size:32px; }
  .section-heading h2{ font-size:29px; }
  .feature-row{ margin-bottom:52px; }
  .feature-media::before{ display:none; }
  .feature-body{ margin-top:28px; }
  .header-area .main-nav .logo img{ width:112px; }
}
@media (max-width:767px){
  .main-banner .caption h2{ font-size:27px; }
  .stat .num{ font-size:38px; }
  .article-body h2{ font-size:23px; }
  .contact-card{ padding:24px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* the hero heading is an H1 (one per page, for SEO) but keeps the
   caption H2 sizing the theme was built around */
@media (max-width:991px){ .main-banner .caption h1{ font-size:34px; } }
@media (max-width:767px){ .main-banner .caption h1{ font-size:27px; } }

/* ---------- how we work ---------- */
.step-box{ background:#fff; border:1px solid var(--line); padding:30px 26px; position:relative;
  transition:border-color .2s, box-shadow .2s, transform .2s; }
.step-box:hover{ border-color:var(--amber); box-shadow:0 14px 34px -18px rgba(31,39,43,.3);
  transform:translateY(-4px); }
.step-num{ display:block; font-size:34px; font-weight:800; color:var(--amber);
  line-height:1; margin-bottom:14px; opacity:.5; }
.step-box h4{ font-size:19px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.step-box p{ font-size:14.5px; color:var(--muted); line-height:1.7; margin:0; }

/* ---------- industries ---------- */
.industries-band{ background:var(--ink); padding:80px 0; }
.industries-band .eyebrow{ display:block; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; margin-bottom:12px; }
.industry-tags{ display:flex; flex-wrap:wrap; gap:12px; }
.industry-tags span{ border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.85);
  padding:10px 18px; font-size:14.5px; transition:background .2s, border-color .2s, color .2s; }
.industry-tags span:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink); }

/* (superseded — the authoritative hero rules are at the end of this file) */

@media (max-width:991px){
  .main-banner .video-overlay{ padding:130px 0 70px; }
}
@media (max-width:767px){
  /* a 5.9 MB autoplay video is not a fair ask on mobile data */
  .main-banner video.hero-media{ display:none; }
}

/* ---------------------------------------------------------------
   Feature rows: the image was noticeably taller than the text
   beside it, leaving a large gap under the button. A 3:2 crop with
   a height cap, plus a slightly narrower image column, balances
   the two sides.
   --------------------------------------------------------------- */
@media (min-width:992px){
  .feature-row > .col-lg-6:first-child{ flex:0 0 46%; max-width:46%; }
  .feature-row > .col-lg-6:last-child { flex:0 0 54%; max-width:54%; }
  .feature-row.reverse > .col-lg-6:first-child{ flex:0 0 54%; max-width:54%; }
  .feature-row.reverse > .col-lg-6:last-child { flex:0 0 46%; max-width:46%; }
  .feature-body{ padding-block:10px; }
}

/* ---------------------------------------------------------------
   tan.ai
   --------------------------------------------------------------- */
.ai-card{ background:#fff; border:1px solid var(--line); padding:30px 26px;
  transition:border-color .2s, box-shadow .2s, transform .2s; }
.ai-card:hover{ border-color:var(--amber); transform:translateY(-4px);
  box-shadow:0 16px 38px -20px rgba(31,39,43,.34); }
.ai-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ai-card-top i{ font-size:26px; color:var(--amber); }
.ai-num{ font-family:'Poppins',sans-serif; font-size:22px; font-weight:800;
  color:var(--line); line-height:1; }
.ai-card h4{ font-size:18px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.ai-card p{ font-size:14.5px; color:var(--muted); line-height:1.72; margin:0; }

/* homepage tan.ai band */
.tanai-band{ position:relative; background:var(--ink); padding:90px 0; overflow:hidden; }
.tanai-band::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 82% 12%, rgba(245,164,37,.16), transparent 62%); }
.tanai-band > .container{ position:relative; z-index:2; }
.tanai-mark{ font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.04em;
  font-size:clamp(46px,7vw,86px); line-height:1; color:#fff; margin:0 0 18px; }
.tanai-mark span{ color:var(--amber); }
.tanai-new{ display:inline-block; vertical-align:super; font-size:12px; letter-spacing:.2em;
  background:var(--amber); color:var(--ink); padding:5px 12px; margin-left:14px; font-weight:600; }
.tanai-claim{ font-size:clamp(20px,2.4vw,28px); font-weight:600; color:#fff;
  line-height:1.35; margin-bottom:18px; max-width:24ch; }
.tanai-band p{ color:rgba(255,255,255,.78); line-height:1.75; }
.tanai-points{ list-style:none; padding:0; margin:26px 0 30px; }
.tanai-points li{ position:relative; padding-left:30px; margin-bottom:12px;
  color:rgba(255,255,255,.85); }
.tanai-points li::before{ content:"\f0eb"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:0; top:2px; color:var(--amber); font-size:14px; }
.tanai-band .feature-media::before{ background:var(--amber); opacity:.28; }

/* nav highlight for tan.ai */
.header-area .main-nav .nav li a.is-new{ color:var(--amber) !important; font-weight:600; }

/* ---------------------------------------------------------------
   LOGO FIX

   The theme's stylesheet contains a blunt global rule:

       img { width: 100%; overflow: hidden; }

   That stretched the logo to fill whatever column it sat in, which
   is why the "i" was being cut off in the footer. These rules give
   the logo its real dimensions back. Everything else on the site
   still gets the theme's default behaviour.
   --------------------------------------------------------------- */
.header-area .main-nav .logo{
  display:flex; align-items:center; height:80px; padding:0; line-height:0;
  float:left; overflow:visible;
}
.header-area .main-nav .logo img{
  width:auto !important; max-width:150px; height:38px; object-fit:contain;
  display:block;
}
.background-header .main-nav .logo{ height:70px; }
.background-header .main-nav .logo img{ height:34px; }

.site-footer .footer-logo,
footer .footer-logo{ display:block; line-height:0; margin-bottom:18px; }
footer .footer-logo img{
  width:auto !important; max-width:160px; height:44px; object-fit:contain; display:block;
}

/* the same global rule was distorting the flag-free icon images too */
.ai-card-top i, .cap-item i{ width:auto; }

@media (max-width:767px){
  .header-area .main-nav .logo img{ height:32px; max-width:120px; }
  footer .footer-logo img{ height:38px; }
}

/* =============================================================
   ANIMATED HERO
   Canvas animation instead of a 5.9 MB stock video: 3 KB, sharp
   at any resolution, and it belongs to us.
   ============================================================= */
/* The theme header is position:absolute at top:40px, so the hero must
   reserve 40px + header height before any content starts. Plain padding
   on a block element — never flex centring, which overflows upward when
   the content is taller than the container. */
.main-banner{ position:relative; display:block; background:#141b1f;
  overflow:hidden; padding:168px 0 104px; min-height:0; }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; }
.main-banner .hero-still{
  position:absolute; inset:0; width:100% !important; height:100%; object-fit:cover;
  z-index:0; opacity:.22; filter:saturate(.55) contrast(1.05);
}
.main-banner::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg, rgba(15,21,25,.97) 0%, rgba(15,21,25,.93) 38%,
             rgba(15,21,25,.78) 66%, rgba(15,21,25,.62) 100%); }
.main-banner .video-overlay{ position:relative; z-index:3; width:100%;
  padding:0; background:none; display:block; }
.main-banner .caption h1{ font-size:clamp(28px,3.4vw,44px); line-height:1.22;
  font-weight:800; color:#fff; max-width:21ch; margin:0 0 20px;
  text-shadow:0 2px 26px rgba(0,0,0,.45); letter-spacing:-.015em; }
.main-banner .caption h1 em{ font-style:normal; color:var(--amber); }
.main-banner .caption h4{ font-size:clamp(15.5px,1.35vw,18.5px); font-weight:400;
  line-height:1.75; color:rgba(255,255,255,.92); max-width:54ch; margin-bottom:34px;
  text-shadow:0 1px 16px rgba(0,0,0,.4); }

/* ---------- live readout panel ---------- */
.live-panel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:6px; overflow:hidden; backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85); }
.live-head{ display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  font-size:13px; color:#fff; font-weight:500; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#12a66a; flex:none;
  box-shadow:0 0 0 0 rgba(18,166,106,.6); animation:livepulse 2.4s infinite; }
@keyframes livepulse{ 70%{box-shadow:0 0 0 9px rgba(18,166,106,0)} 100%{box-shadow:0 0 0 0 rgba(18,166,106,0)} }
.live-tag{ margin-left:auto; font-size:9.5px; letter-spacing:.18em; color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.24); padding:3px 8px; border-radius:2px; font-weight:400; }
.live-row{ display:grid; grid-template-columns:1fr 74px 62px; gap:12px; align-items:center;
  padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.live-row:last-child{ border-bottom:0; }
.live-name{ font-size:12.5px; color:rgba(255,255,255,.86); }
.live-bar{ height:4px; background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden; display:block; }
.live-bar i{ display:block; height:100%; width:0; background:var(--amber); border-radius:2px;
  transition:width .9s cubic-bezier(.4,0,.2,1); }
.live-val{ font-size:12.5px; color:#fff; text-align:right; font-variant-numeric:tabular-nums; }
.live-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); font-size:11.5px; color:rgba(255,255,255,.6); }
.live-foot .ok{ color:#12a66a; }

@media (max-width:991px){
  .main-banner{ padding:140px 0 76px; }
}
@media (max-width:767px){
  .main-banner{ padding:118px 0 60px; }
  .main-banner .caption h1{ font-size:24px; max-width:100%; }
  .main-banner .caption h4{ font-size:15px; }
}

/* ---------- AI in practice band ---------- */
.ai-band{ position:relative; background:var(--ink); overflow:hidden; }
.ai-band::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(820px 480px at 20% 0%, rgba(245,164,37,.13), transparent 60%),
             radial-gradient(700px 420px at 88% 100%, rgba(90,170,220,.10), transparent 62%); }
.ai-band > .container{ position:relative; z-index:2; }
.ai-q{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  padding:30px 26px; transition:background .2s, border-color .2s, transform .2s; }
.ai-q:hover{ background:rgba(255,255,255,.09); border-color:var(--amber); transform:translateY(-4px); }
.ai-q i{ font-size:24px; color:var(--amber); margin-bottom:16px; display:block; }
.ai-q h4{ font-size:17px; font-weight:600; color:#fff; margin-bottom:12px; line-height:1.45; }
.ai-q p{ font-size:14.5px; color:rgba(255,255,255,.72); line-height:1.72; margin:0; }

/* ---------------------------------------------------------------
   HEADER / HERO OVERLAP

   The theme's header starts fully transparent and only gains a
   background once you scroll. Over the animated hero that left the
   logo and the menu sitting directly on top of the headline. The
   header now always carries a dark bar, and the hero reserves room
   for it with padding rather than relying on flex centring — which
   is what allowed the content to slide up underneath it.
   --------------------------------------------------------------- */
.header-area{
  background:rgba(31,39,43,.92) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-area.background-header{
  background:rgba(31,39,43,.98) !important;
  box-shadow:0 4px 20px -8px rgba(0,0,0,.5);
}
.header-area .main-nav .nav li a{ color:rgba(255,255,255,.88); }
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active{ color:var(--amber) !important; }
.background-header .main-nav .logo img{ filter:none; }

/* =============================================================
   tan.ai BLOCKS — used across the whole site
   ============================================================= */

/* compact live panel for sidebars */
.live-panel-sm{ box-shadow:none; background:var(--ink); border-color:rgba(255,255,255,.14); }
.live-panel-sm .live-head{ padding:11px 14px; font-size:12px; }
.live-panel-sm .live-row{ grid-template-columns:1fr 52px 54px; gap:9px; padding:10px 14px; }
.live-panel-sm .live-name{ font-size:11.5px; }
.live-panel-sm .live-val{ font-size:11.5px; }
.side-ai{ background:var(--ink); border-color:var(--ink); padding:22px; }
.side-ai h4{ color:rgba(255,255,255,.62); }
.ai-side-link{ display:inline-block; margin-top:16px; color:var(--amber);
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-decoration:none; }
.ai-side-link:hover{ color:#fff; }

/* in-article call-out */
.ai-callout{ position:relative; background:var(--ink); color:#fff; padding:34px 32px;
  margin:44px 0; border-left:4px solid var(--amber); overflow:hidden; }
.ai-callout::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 220px at 92% 0%, rgba(245,164,37,.20), transparent 65%); }
.ai-callout > *{ position:relative; z-index:2; }
.ai-callout-mark{ font-size:26px; font-weight:800; letter-spacing:-.03em;
  color:#fff; line-height:1; margin-bottom:14px; }
.ai-callout-mark span{ color:var(--amber); }
.ai-callout h3{ font-size:19px; font-weight:600; color:#fff; margin:0 0 12px; }
.ai-callout p{ color:rgba(255,255,255,.80); font-size:15px; line-height:1.75; margin:0 0 16px; }
.ai-callout ul{ list-style:none; padding:0; margin:0 0 20px; }
.ai-callout ul li{ position:relative; padding-left:26px; margin-bottom:9px;
  color:rgba(255,255,255,.78); font-size:14.5px; }
.ai-callout ul li::before{ content:"\f0eb"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:0; top:2px; color:var(--amber); font-size:13px; }
.ai-callout-link{ color:var(--amber); font-weight:600; font-size:13.5px;
  letter-spacing:.04em; text-decoration:none; }
.ai-callout-link:hover{ color:#fff; }

/* full-width closing band */
.ai-strip{ position:relative; background:var(--ink-2); color:#fff; padding:60px 0; overflow:hidden; }
.ai-strip::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(700px 340px at 88% 50%, rgba(245,164,37,.16), transparent 62%); }
.ai-strip > .container{ position:relative; z-index:2; }
.ai-strip-mark{ display:inline-block; font-size:22px; font-weight:800; letter-spacing:-.03em;
  color:#fff; margin-bottom:12px; }
.ai-strip-mark span{ color:var(--amber); }
.ai-strip h2{ font-size:clamp(22px,2.6vw,30px); font-weight:700; color:#fff; margin:0 0 10px; }
.ai-strip p{ color:rgba(255,255,255,.76); margin:0; max-width:62ch; line-height:1.7; }

@media (max-width:767px){
  .ai-callout{ padding:26px 22px; margin:32px 0; }
  .ai-strip{ padding:44px 0; }
}

/* =============================================================
   FLAG COLOUR SYSTEM

   The four markets each keep their own flag colour everywhere
   they appear, so the colour carries meaning rather than being
   decoration. Section labels and icon accents cycle through the
   same four, which ties the whole site to the countries served.

     India   saffron  #FF9933   (and green #138808)
     Canada  red      #D52B1E
     Germany gold     #FFCE00   (and black)
     USA     navy     #0A3161   (and red #B31942)
   ============================================================= */
:root{
  --in:#FF9933;   --in-2:#138808;
  --ca:#D52B1E;
  --de:#FFCE00;   --de-2:#111111;
  --us:#2C5FA8;   --us-2:#B31942;
}

/* the signature four-colour rule, pinned above the header */
.flag-band{ position:fixed; top:0; left:0; right:0; height:4px; z-index:200; display:flex }
.flag-band span{ flex:1 }
.flag-band span:nth-child(1){ background:var(--in) }
.flag-band span:nth-child(2){ background:var(--ca) }
.flag-band span:nth-child(3){ background:var(--de) }
.flag-band span:nth-child(4){ background:var(--us) }

/* flag chips */
.flag-chip{ display:inline-block; width:28px; height:19px; border-radius:2px;
  overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.28); line-height:0 }
.flag-chip img{ width:100% !important; height:100%; object-fit:cover; display:block }
.flag-lg{ width:54px; height:36px; border-radius:3px }
.on-light .flag-chip{ box-shadow:0 0 0 1px rgba(31,39,43,.18) }

/* section labels cycle through the four flag colours */
.section-heading .eyebrow{ color:var(--amber) }
.eyebrow-in{ color:var(--in) !important }
.eyebrow-ca{ color:var(--ca) !important }
.eyebrow-de{ color:var(--de) !important }
.eyebrow-us{ color:var(--us) !important }

/* headline accent words, one per flag */
.hl-in{ color:var(--in) }
.hl-ca{ color:var(--ca) }
.hl-de{ color:var(--de) }
.hl-us{ color:var(--us) }
.hl-green{ color:var(--in-2) }

/* capability tiles: icons take the flag colours in rotation */
.capability-band .cap-item:nth-child(4n+1) i{ color:var(--in) }
.capability-band .cap-item:nth-child(4n+2) i{ color:var(--ca) }
.capability-band .cap-item:nth-child(4n+3) i{ color:var(--de) }
.capability-band .cap-item:nth-child(4n+4) i{ color:var(--us) }
.capability-band .col-6:nth-child(4n+1) .cap-item:hover{ border-color:var(--in); background:rgba(255,153,51,.10) }
.capability-band .col-6:nth-child(4n+2) .cap-item:hover{ border-color:var(--ca); background:rgba(213,43,30,.12) }
.capability-band .col-6:nth-child(4n+3) .cap-item:hover{ border-color:var(--de); background:rgba(255,206,0,.10) }
.capability-band .col-6:nth-child(4n+4) .cap-item:hover{ border-color:var(--us); background:rgba(44,95,168,.14) }

/* cards: a thin flag-coloured rule on top, rotating */
.t-card{ border-top-width:3px }
.cards > div:nth-child(4n+1) .t-card{ border-top-color:var(--in) }
.cards > div:nth-child(4n+2) .t-card{ border-top-color:var(--ca) }
.cards > div:nth-child(4n+3) .t-card{ border-top-color:var(--de) }
.cards > div:nth-child(4n+4) .t-card{ border-top-color:var(--us) }
.row.g-4 > div:nth-child(4n+1) .t-card{ border-top-color:var(--in) }
.row.g-4 > div:nth-child(4n+2) .t-card{ border-top-color:var(--ca) }
.row.g-4 > div:nth-child(4n+3) .t-card{ border-top-color:var(--de) }
.row.g-4 > div:nth-child(4n+4) .t-card{ border-top-color:var(--us) }

/* =============================================================
   GLOBAL PRESENCE
   ============================================================= */
.markets{ background:var(--grey); }
.market-card{ background:#fff; border:1px solid var(--line); border-top:4px solid var(--k);
  height:100%; overflow:hidden; transition:transform .22s, box-shadow .22s }
.market-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px -20px rgba(31,39,43,.34) }
.market-flag{ height:82px; background:var(--grey-2); overflow:hidden; border-bottom:1px solid var(--line) }
.market-flag img{ width:100% !important; height:100%; object-fit:cover; display:block }
.market-body{ padding:22px 24px 26px }
.market-body h4{ font-size:18px; font-weight:600; color:var(--ink); margin:0 0 4px }
.market-role{ font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--k); margin-bottom:12px }
.market-body p{ font-size:14px; color:var(--muted); line-height:1.65; margin:0 }

/* footer flag row */
.footer-flags{ display:flex; gap:9px; list-style:none; padding:0; margin:16px 0 0 }

/* =============================================================
   SPACING TIGHTENED

   The bands were carrying a lot of empty vertical space,
   especially on narrow screens where stat figures each took a
   full block. This recovers roughly a screen and a half of
   scrolling across the site without losing any content.
   ============================================================= */

/* stats: 2 per row on phones instead of 1, and much less padding */
.stats-band{ padding:52px 0; }
.stat{ padding:0; }
.stat .num{ font-size:clamp(30px,4.4vw,46px); }
.stat .label{ font-size:11px; letter-spacing:.11em; margin-top:8px; line-height:1.4; }
@media (max-width:767px){
  .stats-band{ padding:38px 0; }
  .stats-band .col-6{ flex:0 0 50%; max-width:50%; }
  .stat .num{ font-size:28px; }
  .stat .label{ font-size:10px; }
}

/* closing call to action */
.cta-band{ padding:38px 0; }
.cta-band h3{ font-size:clamp(20px,2.4vw,26px); margin-bottom:4px; }
.cta-band p{ font-size:14.5px; }
@media (max-width:767px){
  .cta-band{ padding:30px 0; text-align:center; }
  .cta-band .text-lg-end{ margin-top:16px; }
}

/* general section rhythm */
.section-pad{ padding:clamp(56px,6.5vw,88px) 0; }
.section-pad-sm{ padding:clamp(40px,4.5vw,60px) 0; }
.sec-head, .section-heading{ margin-bottom:34px; }
.industries-band{ padding:56px 0; }
.ai-strip{ padding:46px 0; }
.capability-band{ padding:52px 0; }
.capability-band h5{ font-size:16px; line-height:1.65; }
.capability-band .cap-item{ padding:18px 16px; }
.capability-band .cap-item i{ font-size:20px; margin-bottom:9px; }
.capability-band .cap-item h4{ font-size:15px; }

/* =============================================================
   FOOTER — compacted
   ============================================================= */
.site-footer, footer.bg-dark{ padding:46px 0 0 !important; }
footer section.p-4{ padding:0 !important; }
footer .container{ margin-top:0 !important; }
footer .row.mt-3{ margin-top:0 !important; }
footer h6{ margin-bottom:14px !important; font-size:12px; }
footer p{ margin-bottom:7px; line-height:1.5; }
footer .text-footer, footer .text-footer-plain{ font-size:13.5px; }
footer .text-footer-intro{ font-size:13.5px; line-height:1.6; margin-bottom:14px; }
footer .mb-4{ margin-bottom:26px !important; }
.footer-flags{ margin:0 0 14px; }
.footer-bottom{ margin-top:28px; padding:14px 0 !important; font-size:12.5px; }

/* link columns run in two columns so the footer is wider than it is tall */
.footer-links-2col{ column-count:2; column-gap:18px; }
.footer-links-2col p{ break-inside:avoid; }

@media (max-width:767px){
  .site-footer, footer.bg-dark{ padding:34px 0 0 !important; }
  .footer-links-2col{ column-count:2; }
  footer .mb-4{ margin-bottom:20px !important; }
}

/* ---------- tan.ai showpiece image ---------- */
.tanai-showpiece{ position:relative; border:1px solid var(--line); background:var(--ink);
  overflow:hidden; border-radius:4px; }
.tanai-showpiece img{ width:100% !important; height:auto; display:block; }
.tanai-showpiece-cap{ padding:16px 22px; background:var(--ink); color:rgba(255,255,255,.74);
  font-size:14px; line-height:1.6; border-top:3px solid var(--amber); }
.tanai-showpiece-cap strong{ color:#fff; }
@media (max-width:767px){
  .tanai-showpiece-cap{ padding:14px 16px; font-size:13px; }
}

/* =============================================================
   STICKY HEADER — rebuilt

   The theme made the header sticky with:
       var box = $('.header-text').height();
       if (scroll >= box - header) { addClass('background-header') }

   ".header-text" only exists inside the home page hero, so on the
   other 24 pages it was undefined and the header never stuck.
   Its own rule also forced a WHITE background, which would have
   hidden the white logo.

   The header is now simply fixed at all times. No JavaScript is
   required for it to stay put, so it cannot break again.
   ============================================================= */
.header-area,
.header-area.background-header{
  position:fixed !important;
  top:0 !important;
  left:0; right:0;
  height:auto !important;
  z-index:1000;
  background:rgba(20,27,31,.94) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:none !important;
  transition:background .25s ease, box-shadow .25s ease;
}
/* once the page is scrolled, firm it up */
.header-area.is-stuck,
.header-area.background-header{
  background:rgba(17,23,26,.985) !important;
  box-shadow:0 6px 26px -10px rgba(0,0,0,.65) !important;
}
.header-area .main-nav{ position:relative }
.header-area .main-nav .logo,
.background-header .main-nav .logo{ height:72px !important; line-height:0 !important }
.header-area .main-nav .nav > li > a{ line-height:72px !important; color:rgba(255,255,255,.9) }
.background-header .main-nav .nav > li > a{ color:rgba(255,255,255,.9) }
.header-area .main-nav .nav > li > a:hover,
.header-area .main-nav .nav > li > a.active{ color:var(--amber) !important }

/* the fixed header no longer sits at top:40px, so pages need less offset */
.main-banner{ padding-top:126px !important }
.page-banner{ padding-top:150px !important }
@media (max-width:991px){
  .main-banner{ padding-top:110px !important }
  .page-banner{ padding-top:124px !important }
}

/* =============================================================
   MOBILE — a proper off-canvas menu instead of slideToggle
   ============================================================= */
@media (max-width:991px){
  html,body{ overflow-x:hidden; max-width:100% }

  .header-area .main-nav .logo,
  .background-header .main-nav .logo{ height:62px !important }
  .header-area .main-nav .logo img{ width:112px !important; max-width:112px !important }

  .menu-trigger{
    display:block; position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:44px; height:44px; cursor:pointer; z-index:20;
  }
  .menu-trigger span,
  .menu-trigger span:before,
  .menu-trigger span:after{
    position:absolute; left:9px; width:26px; height:2px; background:#fff;
    border-radius:2px; transition:transform .25s ease, opacity .2s ease, background .2s;
    content:""; display:block;
  }
  .menu-trigger span{ top:21px; text-indent:-9999px; overflow:hidden }
  .menu-trigger span:before{ top:-8px; left:0 }
  .menu-trigger span:after{ top:8px; left:0 }
  .menu-trigger.active span{ background:transparent }
  .menu-trigger.active span:before{ transform:translateY(8px) rotate(45deg); background:var(--amber) }
  .menu-trigger.active span:after{ transform:translateY(-8px) rotate(-45deg); background:var(--amber) }

  /* the panel itself */
  .header-area .main-nav .nav{
    display:block !important;
    position:fixed; top:62px; left:0; right:0;
    max-height:calc(100vh - 62px); overflow-y:auto;
    background:#11171a; margin:0; padding:8px 0 24px;
    border-top:1px solid rgba(255,255,255,.10);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    -webkit-overflow-scrolling:touch;
  }
  .header-area.menu-open .main-nav .nav{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
  }
  .header-area .main-nav .nav > li{ display:block; width:100%; border-bottom:1px solid rgba(255,255,255,.07) }
  .header-area .main-nav .nav > li:last-child{ border-bottom:0 }
  .header-area .main-nav .nav > li > a{
    line-height:1.4 !important; padding:15px 22px !important; font-size:16px;
    display:block; width:100%; height:auto !important;
  }
  .header-area .main-nav .nav > li.has-sub > a{ position:relative }
  .header-area .main-nav .nav > li.has-sub > a:after{
    content:"\f078"; font-family:"Font Awesome 5 Free"; font-weight:900;
    position:absolute; right:22px; top:50%; transform:translateY(-50%);
    font-size:11px; color:var(--amber); transition:transform .2s;
  }
  .header-area .main-nav .nav > li.has-sub.open > a:after{ transform:translateY(-50%) rotate(180deg) }

  .header-area .main-nav .nav li .sub-menu{
    display:none; position:static; width:100%; background:rgba(255,255,255,.04);
    box-shadow:none; padding:4px 0 8px; opacity:1; visibility:visible; transform:none;
  }
  .header-area .main-nav .nav li.open .sub-menu{ display:block }
  .header-area .main-nav .nav li .sub-menu li a{
    padding:12px 22px 12px 38px !important; font-size:14.5px;
    color:rgba(255,255,255,.78); border:0; line-height:1.4 !important;
  }
  .header-area .main-nav .nav li .sub-menu li a:hover{ color:var(--amber); background:rgba(255,255,255,.05) }
}

/* =============================================================
   MOBILE LAYOUT FIXES
   ============================================================= */
@media (max-width:767px){
  /* nothing may push the page sideways */
  html,body{ overflow-x:hidden }
  img,video,canvas,iframe,table{ max-width:100% }
  .container{ padding-left:18px; padding-right:18px }

  /* type that was set for desktop widths */
  .section-heading h2{ font-size:24px; line-height:1.3 }
  .section-heading p{ font-size:14.5px }
  .page-banner h1{ font-size:26px; line-height:1.28 }
  .page-banner p{ font-size:15px }
  .article-body{ font-size:15.5px }
  .article-body h2{ font-size:21px; margin:32px 0 14px }
  .feature-body h2{ font-size:23px }
  .cta-inner h3{ font-size:21px }

  /* buttons: full width and a proper tap target */
  .main-button-yellow, .main-button-red{ display:block; width:100% }
  .main-button-yellow div a, .main-button-red div a,
  .main-button-yellow div button{
    display:block; width:100%; text-align:center; padding:14px 18px; font-size:15px;
  }
  .hero-actions .main-button-yellow, .hero-actions .main-button-red{ margin-bottom:10px }

  /* cards and grids */
  .t-card .body{ padding:20px }
  .ai-q, .ai-card, .step-box, .side-box{ padding:22px 20px }
  .ai-callout{ padding:24px 20px }
  .market-body{ padding:18px 20px 22px }

  /* the live panel is desktop-only, but if it shows keep it usable */
  .live-row{ grid-template-columns:1fr 46px 52px; gap:8px; padding:11px 14px }
  .live-name{ font-size:11.5px }

  /* tables and long words must not break the layout */
  .article-body p, .article-body li{ overflow-wrap:anywhere }

  /* footer */
  footer .footer-links-2col{ column-count:2 }
  .footer-bottom{ font-size:12px; line-height:1.6 }
}

/* very small phones */
@media (max-width:400px){
  .header-area .main-nav .logo img{ width:100px !important; max-width:100px !important }
  .section-heading h2{ font-size:22px }
  .page-banner h1{ font-size:23px }
  .main-banner .caption h1{ font-size:22px }
  footer .footer-links-2col{ column-count:1 }
}

/* ---------------------------------------------------------------
   HERO CAPTION

   The theme centres the caption with:
       .main-banner .caption { position:absolute; top:50%;
                               transform:translateY(-50%) }
   Absolute positioning ignores the section's padding, so on narrow
   screens the caption floated up behind the fixed header — the h1
   was measuring 29px ABOVE the top of the viewport.

   Put back into normal document flow, where the padding applies.
   --------------------------------------------------------------- */
.main-banner .caption{
  position:static !important;
  top:auto !important;
  transform:none !important;
}
@media (max-width:991px){
  .main-banner .caption{ position:static !important; top:auto !important; transform:none !important; }
}
@media (max-width:767px){
  .main-banner .caption{ position:static !important; top:auto !important; transform:none !important; }
}