/* IT Traders — components added on top of the static build.
   site.css is the exported stylesheet and is left untouched; everything new
   lives here and is built from the same custom properties, so it inherits the
   palette, the type scale and the shadows rather than restating them. */

/* ------------------------------------------------------------------
   Supported Brands — logo wall
   Replaces the text chip row. A brand with a logo shows the logo; one
   without shows its name in a matching tile, so a missing image degrades
   into something deliberate instead of a gap.
------------------------------------------------------------------ */
.pt-brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.9rem;
}
.pt-brand-logo{
  align-items:center;
  background:#fff;
  border:1px solid var(--sky-200);
  border-radius:14px;
  display:flex;
  justify-content:center;
  min-height:82px;
  padding:1rem 1.1rem;
  position:relative;
  text-align:center;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.pt-brand-logo:hover{
  border-color:var(--primary-blue);
  box-shadow:0 12px 28px #0ea5e91f;
  transform:translateY(-3px);
}
.pt-brand-logo img{
  display:block;
  max-height:38px;
  max-width:100%;
  object-fit:contain;
  width:auto;
}
/* Name-only tile, for a brand with no logo uploaded yet. */
.pt-brand-logo--text{
  color:var(--gray-700);
  font-family:var(--font-heading);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.35;
}
.pt-brand-logo--text:hover{color:var(--primary-blue-dark)}
a.pt-brand-logo{text-decoration:none}
.pt-brand-note{
  color:var(--gray-500);
  font-size:.85rem;
  margin:1.1rem 0 0;
}
@media (max-width:600px){
  .pt-brand-grid{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:.7rem}
  .pt-brand-logo{min-height:70px;padding:.8rem}
  .pt-brand-logo img{max-height:30px}
}

/* ------------------------------------------------------------------
   FAQ accordion
------------------------------------------------------------------ */
.itt-faq-section{padding:4.5rem 0}
.itt-faq-section.bg-sky-50{background:var(--sky-50)}
.itt-faq-head{margin-bottom:2.5rem;max-width:760px}
.itt-faq-head .section-title{margin-bottom:.5rem}
.itt-faq-head p{color:var(--gray-600);font-size:1.02rem;line-height:1.75;margin-top:.85rem}

/* Left-aligned to sit under the heading, the way the rest of a detail page
   reads. A centred list against a left-aligned heading looks like a mistake. */
.itt-faq-list{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin:0;
  max-width:920px;
}
.itt-faq-item{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.itt-faq-item:hover{border-color:var(--sky-200)}
.itt-faq-item.is-open{
  border-color:var(--sky-300);
  box-shadow:0 16px 40px #0ea5e91f;
}
.itt-faq-q{
  align-items:flex-start;
  background:none;
  border:0;
  color:var(--gray-900);
  cursor:pointer;
  display:flex;
  font-family:var(--font-heading);
  font-size:1.02rem;
  font-weight:600;
  gap:1rem;
  justify-content:space-between;
  line-height:1.5;
  padding:1.3rem 1.5rem;
  text-align:left;
  width:100%;
}
.itt-faq-q:hover{color:var(--primary-blue-dark)}
.itt-faq-q:focus-visible{
  outline:2px solid var(--primary-blue);
  outline-offset:-2px;
}
.itt-faq-icon{
  align-items:center;
  background:var(--sky-50);
  border-radius:50%;
  color:var(--primary-blue-dark);
  display:flex;
  flex:0 0 28px;
  height:28px;
  justify-content:center;
  margin-top:.1rem;
  transition:background .25s ease,transform .3s ease;
  width:28px;
}
.itt-faq-icon svg{display:block;height:12px;width:12px;transition:transform .3s ease}
.itt-faq-item.is-open .itt-faq-icon{background:var(--primary-blue);color:#fff}
.itt-faq-item.is-open .itt-faq-icon svg{transform:rotate(180deg)}

/* Height is animated from a measured pixel value set by the script, so the
   transition works without hard-coding a max-height guess. */
.itt-faq-a{
  height:0;
  overflow:hidden;
  transition:height .32s cubic-bezier(.4,0,.2,1);
}
.itt-faq-a-inner{
  border-top:1px solid var(--gray-100);
  color:var(--gray-600);
  font-size:.97rem;
  line-height:1.8;
  padding:1.15rem 1.5rem 1.45rem;
}
.itt-faq-a-inner :first-child{margin-top:0}
.itt-faq-a-inner :last-child{margin-bottom:0}
.itt-faq-a-inner p{margin:0 0 .9rem}
.itt-faq-a-inner ul,.itt-faq-a-inner ol{margin:0 0 .9rem;padding-left:1.25rem}
.itt-faq-a-inner li{margin-bottom:.35rem}
.itt-faq-a-inner a{color:var(--primary-blue-dark);text-decoration:underline}

/* Without JavaScript every answer is open, so the content is still readable
   and still crawlable. */
.no-js .itt-faq-a{height:auto}

@media (max-width:600px){
  .itt-faq-section{padding:3rem 0}
  .itt-faq-q{font-size:.96rem;padding:1.1rem 1.15rem}
  .itt-faq-a-inner{padding:1rem 1.15rem 1.25rem}
}

/* ══════════════════════════════════════════════════════════════════════
   DETAIL SIDEBAR — case studies + Insights
   Two-column body on the detail templates. Kept here rather than in
   site.css so the byte-identical export contract with the static build
   still holds.
   ══════════════════════════════════════════════════════════════════════ */
.itt-dbody{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media (min-width:1024px){
  .itt-dbody{grid-template-columns:minmax(0,1fr) 340px;gap:3rem}
  .itt-dsb{position:sticky;top:104px}
}
.itt-dbody .entry-content{min-width:0}

.itt-dsb{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.itt-dsb-card{background:#fff;border:1px solid #0f172a12;border-radius:20px;
  padding:1.35rem 1.35rem 1.15rem;
  box-shadow:0 2px 10px rgba(2,6,23,.05)}
.itt-dsb-title{margin:0 0 1rem;font-size:.82rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#0f172a;display:flex;align-items:center;gap:.6rem}
.itt-dsb-title::before{content:"";width:4px;height:1.05rem;border-radius:999px;
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);flex:none}

.itt-dsb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.itt-dsb-item + .itt-dsb-item{border-top:1px solid #0f172a0f;padding-top:.35rem}
.itt-dsb-link{display:flex;gap:.8rem;align-items:center;padding:.55rem;border-radius:14px;
  text-decoration:none;transition:background .3s ease,transform .3s ease}
.itt-dsb-link:hover{background:linear-gradient(135deg,#eff6ff,#e0f2fe);transform:translateX(2px)}
.itt-dsb-thumb{flex:none;width:76px;height:56px;border-radius:11px;overflow:hidden;
  background:#e2e8f0;box-shadow:0 4px 12px -6px rgba(2,6,23,.5)}
.itt-dsb-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.itt-dsb-link:hover .itt-dsb-thumb img{transform:scale(1.08)}
.itt-dsb-meta{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.itt-dsb-name{font-size:.85rem;font-weight:700;line-height:1.32;color:#0f172a;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s ease}
.itt-dsb-link:hover .itt-dsb-name{color:#0284c7}
.itt-dsb-date{font-size:.72rem;font-weight:600;color:#64748b}

.itt-dsb-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.78rem;font-weight:800;color:#0284c7;text-decoration:none;
  transition:gap .25s ease}
.itt-dsb-more:hover{gap:.7rem}

.itt-dsb-cta{background:linear-gradient(150deg,#0b1120,#0c4a6e);border-color:#38bdf83d}
.itt-dsb-cta .itt-dsb-title{color:#fff}
.itt-dsb-cta-text{margin:0 0 1rem;font-size:.83rem;line-height:1.6;color:#cbd5e1e6}
.itt-dsb-cta-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.15rem;
  border-radius:999px;font-size:.82rem;font-weight:800;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
  box-shadow:0 12px 26px -12px rgba(14,165,233,.95);
  transition:transform .3s ease,box-shadow .3s ease}
.itt-dsb-cta-btn:hover{transform:translateY(-2px);
  box-shadow:0 18px 34px -14px rgba(14,165,233,1)}

@media (prefers-reduced-motion:reduce){
  .itt-dsb-link:hover,.itt-dsb-cta-btn:hover{transform:none}
  .itt-dsb-link:hover .itt-dsb-thumb img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ACTIVE NAV STATE
   The walker already marked the current link `.active`, but nothing in
   site.css styled a nav link in that state, so it was invisible. The
   dropdown parent now carries it too while a child page is open.
   ══════════════════════════════════════════════════════════════════════ */
.navbar-menu .nav-link{position:relative}
.navbar-menu .nav-link.active{color:var(--primary-blue-dark,#0369a1);font-weight:700}
.navbar-menu .nav-link.active::after{
  content:"";position:absolute;left:0;right:auto;width:100%;bottom:-6px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,#1d4ed8,#38bdf8);
  transform-origin:left center;
  animation:ittNavUnderline .38s cubic-bezier(.22,1,.36,1) both}
/* Animates scale only. An opacity-0 first keyframe would leave the underline
   invisible anywhere the animation never runs. */
@keyframes ittNavUnderline{from{transform:scaleX(.15)}to{transform:none}}
.navbar-menu .nav-dropdown.is-current .dropdown-toggle{color:var(--primary-blue-dark,#0369a1)}

/* Current item inside an open dropdown panel */
.dropdown-menu .dropdown-item.active{
  background:linear-gradient(135deg,#eff6ff,#e0f2fe);
  color:#0369a1;font-weight:700;position:relative}
.dropdown-menu .dropdown-item.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;border-radius:999px;background:linear-gradient(180deg,#38bdf8,#0ea5e9)}

/* Mobile nav uses the same classes */
.mobile-menu .nav-link.active,.navbar-mobile .nav-link.active{
  color:#0369a1;font-weight:700;background:linear-gradient(135deg,#eff6ff,#e0f2fe);
  border-radius:10px}
.mobile-menu .nav-link.active::after,.navbar-mobile .nav-link.active::after{content:none}

@media (prefers-reduced-motion:reduce){
  .navbar-menu .nav-link.active::after{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ — premium restyle
   Numbered markers, a gradient rail on the open item and a properly
   animated panel, instead of four flat boxes.
   ══════════════════════════════════════════════════════════════════════ */
.itt-faq-section{position:relative;overflow:hidden}
.itt-faq-section::before{
  content:"";position:absolute;top:-160px;right:-160px;width:520px;height:520px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(14,165,233,.16) 0,rgba(14,165,233,0) 68%)}
.itt-faq-head{position:relative;z-index:1}

.itt-faq-list{counter-reset:ittfaq;gap:1rem;max-width:960px}
.itt-faq-item{
  position:relative;border-radius:18px;border:1px solid rgba(15,23,42,.09);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(2,6,23,.05);
  transition:border-color .35s cubic-bezier(.22,1,.36,1),
             box-shadow .35s cubic-bezier(.22,1,.36,1),
             transform .35s cubic-bezier(.22,1,.36,1)}
.itt-faq-item:hover{transform:translateY(-2px);border-color:rgba(14,165,233,.42);
  box-shadow:0 16px 34px -18px rgba(14,165,233,.6)}
.itt-faq-item.is-open{
  border-color:rgba(14,165,233,.55);
  box-shadow:0 22px 48px -22px rgba(14,165,233,.75)}
/* Gradient rail down the left edge of the open item */
.itt-faq-item.is-open::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  border-radius:999px;background:linear-gradient(180deg,#1d4ed8,#38bdf8)}

.itt-faq-q{gap:1.1rem;padding:1.35rem 1.6rem;align-items:center;
  font-size:1rem;font-weight:700;letter-spacing:-.01em}
/* Numbered marker */
.itt-faq-q > span:first-child{position:relative;padding-left:2.6rem;display:block}
.itt-faq-q > span:first-child::before{
  counter-increment:ittfaq;content:counter(ittfaq,decimal-leading-zero);
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-size:.72rem;font-weight:900;letter-spacing:.06em;
  color:#0284c7;background:linear-gradient(160deg,#eff6ff,#e0f2fe);
  border:1px solid rgba(14,165,233,.22);border-radius:8px;
  padding:.28rem .42rem;line-height:1;
  transition:background .35s ease,color .35s ease,border-color .35s ease}
.itt-faq-item.is-open .itt-faq-q > span:first-child::before{
  background:linear-gradient(150deg,#1d4ed8,#0ea5e9);color:#fff;border-color:transparent}

.itt-faq-icon{
  flex:0 0 30px;height:30px;width:30px;
  background:linear-gradient(160deg,#eff6ff,#e0f2fe);
  border:1px solid rgba(14,165,233,.2);
  transition:transform .4s cubic-bezier(.22,1,.36,1),background .35s ease,
             color .35s ease,border-color .35s ease}
.itt-faq-item.is-open .itt-faq-icon{
  transform:rotate(180deg);background:linear-gradient(150deg,#1d4ed8,#0ea5e9);
  color:#fff;border-color:transparent}

.itt-faq-a-inner{padding:0 1.6rem 1.45rem 4.2rem;color:#475569;
  font-size:.95rem;line-height:1.75}

@media (max-width:600px){
  .itt-faq-q{padding:1.1rem 1.15rem;font-size:.94rem;gap:.75rem}
  .itt-faq-q > span:first-child{padding-left:2.2rem}
  .itt-faq-a-inner{padding:0 1.15rem 1.2rem 3.35rem;font-size:.9rem}
  .itt-faq-section::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .itt-faq-item:hover{transform:none}
  .itt-faq-icon{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   DETAIL BODY — service links rendered as tags
   Inline links inside a case study or Insights post point at service
   pages, so they read better as tappable tags than as underlined text.
   Scoped to .itt-dbody .entry-content so the sidebar, the footer and any
   other content area are untouched.
   ══════════════════════════════════════════════════════════════════════ */
.itt-dbody .entry-content a[href]{
  display:inline-flex;align-items:center;gap:.34rem;
  max-width:100%;
  padding:.14rem .6rem;margin:.05rem .04rem;
  border-radius:999px;
  font-size:.94em;font-weight:700;line-height:1.45;
  color:#0369a1;text-decoration:none;
  background:linear-gradient(135deg,#eff6ff,#e0f2fe);
  border:1px solid rgba(14,165,233,.3);
  box-shadow:0 1px 2px rgba(2,6,23,.04);
  transition:background .3s cubic-bezier(.22,1,.36,1),
             color .3s cubic-bezier(.22,1,.36,1),
             border-color .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s cubic-bezier(.22,1,.36,1),
             transform .3s cubic-bezier(.22,1,.36,1)}
/* Arrow drawn as a mask so it always matches the link colour. */
.itt-dbody .entry-content a[href]::after{
  content:"";flex:none;width:.74em;height:.74em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.itt-dbody .entry-content a[href]:hover{
  color:#fff;border-color:transparent;transform:translateY(-1px);
  background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
  box-shadow:0 9px 20px -9px rgba(14,165,233,.95)}
.itt-dbody .entry-content a[href]:hover::after{transform:translate(2px,-2px)}
.itt-dbody .entry-content a[href]:focus-visible{
  outline:3px solid rgba(14,165,233,.4);outline-offset:2px}
/* A link that is the whole list item should not inherit the bullet spacing. */
.itt-dbody .entry-content li > a[href]:only-child{margin-left:0}

@media (prefers-reduced-motion:reduce){
  .itt-dbody .entry-content a[href]:hover{transform:none}
  .itt-dbody .entry-content a[href]:hover::after{transform:none}
}

/* ── FAQ heading centred ───────────────────────────────────────────────
   The eyebrow, heading and intro centre over the list; the list itself
   stays centred as a block with its questions left-aligned, which is
   where they read best. */
.itt-faq-head{margin-left:auto;margin-right:auto;text-align:center}
.itt-faq-list{margin-left:auto;margin-right:auto}

/* ══════════════════════════════════════════════════════════════════════
   SUPPORTED BRANDS — logo slider
   The set is printed twice, so translating the track by -50% lands on the
   seam and the loop is seamless. Hover pauses it; reduced motion stops it
   and lets the lanes wrap as a static wall instead.
   ══════════════════════════════════════════════════════════════════════ */
.pt-brand-slider{
  position:relative;overflow:hidden;
  padding:.35rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pt-brand-track{display:flex;width:max-content;
  animation:ittBrandScroll 34s linear infinite}
.pt-brand-slider:hover .pt-brand-track,
.pt-brand-slider:focus-within .pt-brand-track{animation-play-state:paused}
.pt-brand-lane{display:flex;align-items:center;gap:1rem;padding-right:1rem;flex:none}
@keyframes ittBrandScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Tiles */
.pt-brand-slider .pt-brand-logo{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:158px;height:82px;padding:.9rem 1.1rem;
  border-radius:15px;background:#fff;
  border:1px solid rgba(15,23,42,.09);
  box-shadow:0 2px 10px rgba(2,6,23,.05);
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             border-color .35s ease,box-shadow .35s ease}
.pt-brand-slider .pt-brand-logo:hover{
  transform:translateY(-4px);border-color:rgba(14,165,233,.5);
  box-shadow:0 16px 32px -16px rgba(14,165,233,.7)}
.pt-brand-slider .pt-brand-logo img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  /* Brands show in their own colours; a greyscale wall hides the
     recognition value that is the whole point of the logo strip. */
  opacity:1;
  transition:transform .35s ease}
.pt-brand-slider .pt-brand-logo:hover img{transform:scale(1.04)}
/* A brand with no logo uploaded yet still holds its place, as a name tile. */
.pt-brand-slider .pt-brand-logo--text{
  font-size:.82rem;font-weight:800;letter-spacing:-.01em;text-align:center;
  color:#334155;line-height:1.3;
  background:linear-gradient(160deg,#f8fafc,#eff6ff)}
.pt-brand-slider .pt-brand-logo--text:hover{color:#0369a1}

@media (max-width:600px){
  .pt-brand-slider .pt-brand-logo{width:128px;height:70px;padding:.7rem .85rem}
  .pt-brand-lane{gap:.7rem;padding-right:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .pt-brand-track{animation:none;width:100%;flex-wrap:wrap}
  .pt-brand-lane{flex-wrap:wrap}
  .pt-brand-lane[aria-hidden="true"]{display:none}
  .pt-brand-slider{-webkit-mask-image:none;mask-image:none}
}

/* ── CTA buttons — 20% smaller ──────────────────────────────────────────
   .btn-lg (site.css) read as oversized on detail/hero/CTA bands — e.g.
   "Get a Quote for This Solution" and "Schedule a Consultation". Overridden
   here, loaded after site.css, rather than editing the exported file. */
.btn-lg{font-size:.9rem;padding:.9rem 2rem}

/* ══════════════════════════════════════════════════════════════════════════
   SEO LANDING-PAGE SECTIONS (added 2026-09-04)
   Optional bands on the detail template (template-parts/parts/detail.php):
   hero badge/stats, a brand comparison table, an inline CTA banner, a
   numbered process, a benefits list and an industry use-case grid. Every
   one only renders when its content is filled in, so the other detail
   pages are unaffected. Built on this file's own tokens (--primary-blue,
   --gray-*, --shadow-*, --sky-*, --font-heading) to read as native.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- hero badge + trust stats ---------- */
.pt-hero-badge{
  display:inline-flex;align-items:center;margin-bottom:1rem;padding:.4rem .95rem;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.pt-hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-top:2.25rem;max-width:640px}
.pt-hero-stat{
  padding:.85rem .5rem;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
.pt-hero-stat strong{display:block;font-family:var(--font-heading);font-size:1.15rem;font-weight:800;color:#fff;line-height:1.2}
.pt-hero-stat span{display:block;margin-top:.2rem;font-size:.66rem;font-weight:700;letter-spacing:.03em;color:#e2e8f0}
@media (max-width:640px){
  .pt-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px}
  .pt-hero-stat strong{font-size:1rem}
}

/* ---------- shared section chrome ---------- */
.pt-section-lead{color:var(--gray-600);font-size:1.02rem;line-height:1.75;max-width:760px;margin:.6rem 0 2rem}
.pt-brand-table,.pt-inline-cta,.pt-process,.pt-benefits,.pt-usecases{margin:0 0 3.5rem}
.pt-brand-table>h2,.pt-process>h2,.pt-benefits>h2,.pt-usecases>h2{
  font-family:var(--font-heading);font-size:1.75rem;font-weight:800;color:var(--gray-900);letter-spacing:-.01em;margin-bottom:.4rem
}

/* ---------- brand comparison table ---------- */
.pt-brand-table-scroll{overflow-x:auto;border-radius:16px;border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}
.pt-brand-table table{width:100%;border-collapse:collapse;min-width:680px;background:#fff}
.pt-brand-table th,.pt-brand-table td{text-align:left;vertical-align:top;padding:1rem 1.2rem;font-size:.92rem;line-height:1.55}
.pt-brand-table thead th{
  background:var(--sky-50);color:var(--primary-blue-dark);font-weight:800;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--sky-100)
}
.pt-brand-table tbody tr{border-top:1px solid var(--gray-100)}
.pt-brand-table tbody tr:hover{background:var(--sky-50)}
.pt-brand-table td:first-child{font-weight:700;color:var(--gray-900);white-space:nowrap}
.pt-brand-table td{color:var(--gray-600)}

/* ---------- inline CTA banner ---------- */
.pt-inline-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.5rem 1.85rem;border-radius:16px;
  background:linear-gradient(135deg,var(--sky-50) 0%,#fff 100%);border:1px solid var(--sky-100)
}
.pt-inline-cta p{margin:0;font-size:1.02rem;font-weight:600;color:var(--gray-800);max-width:640px}
.pt-inline-cta .btn{flex:none}

/* ---------- process steps ---------- */
.pt-process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.pt-process-step{position:relative;padding:2rem 1.6rem 1.75rem;border-radius:16px;background:#fff;border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease}
.pt-process-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pt-process-num{
  display:inline-block;margin-bottom:.85rem;font-family:var(--font-heading);font-weight:800;font-size:1.6rem;
  background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-dark) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--primary-blue)
}
.pt-process-step h3{font-size:1.05rem;font-weight:800;color:var(--gray-900);margin-bottom:.5rem}
.pt-process-step p{font-size:.9rem;line-height:1.65;color:var(--gray-600);margin:0}

/* ---------- benefits list ---------- */
.pt-benefits-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.pt-benefits-list li{
  display:flex;align-items:flex-start;gap:.85rem;padding:1.1rem 1.3rem;border-radius:14px;
  background:#fff;border:1px solid var(--gray-100);box-shadow:var(--shadow-sm)
}
.pt-benefits-list svg{
  flex:none;width:22px;height:22px;padding:4px;border-radius:999px;margin-top:.1rem;
  background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-dark) 100%);color:#fff
}
.pt-benefits-list span{font-size:.96rem;line-height:1.65;color:var(--gray-700)}
.pt-benefits-list strong{color:var(--gray-900)}

/* ---------- industry use cases ---------- */
.pt-usecases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.pt-usecase-box{padding:1.85rem 1.6rem;border-radius:16px;background:var(--sky-50);border:1px solid var(--sky-100)}
.pt-usecase-box h3{font-size:1.02rem;font-weight:800;color:var(--gray-900);margin-bottom:.6rem}
.pt-usecase-box p{font-size:.9rem;line-height:1.65;color:var(--gray-600);margin:0}

/* ---------- closing CTA extras ---------- */
.btn-whatsapp{
  color:#fff;background:linear-gradient(135deg,#128c7e 0,#25d366 100%);box-shadow:0 10px 24px -12px rgba(37,211,102,.7)
}
.btn-whatsapp:hover{box-shadow:0 16px 30px -12px rgba(37,211,102,.85);transform:translateY(-3px)}
.pt-cta-footnote{margin-top:1.25rem;font-size:.82rem;color:rgba(255,255,255,.7)}

@media (max-width:767px){
  .pt-brand-table>h2,.pt-process>h2,.pt-benefits>h2,.pt-usecases>h2{font-size:1.4rem}
  .pt-inline-cta{flex-direction:column;align-items:flex-start}
  .pt-inline-cta .btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   SEO LANDING-PAGE SECTIONS, PART 2 (added 2026-09-04)
   Supporting images, whitespace-filling CTA strips and photo use-case cards.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- deliverables: optional two-column layout with a photo ---------- */
.pt-features--with-image{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:start;margin-bottom:2.5rem}
.pt-features-media{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3}
.pt-features-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:900px){
  .pt-features--with-image{grid-template-columns:.9fr 1.4fr}
  .pt-features-media{position:sticky;top:104px;aspect-ratio:1/1;max-height:520px}
}

/* ---------- whitespace-filling CTA strips (same .btn classes as the rest of
   the site — see pt-hero / pt-cta — so every button on the page matches) ---------- */
.pt-inline-cta-row{
  position:relative;justify-content:center;overflow:hidden;margin:0 0 3.5rem;padding:2.75rem 1.5rem;border-radius:22px;
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/feature-18.jpg') center/cover;
  box-shadow:0 24px 60px -28px rgba(2,6,23,.55)
}
/* .btn-consult (assets/css/itt-modal.css) is a solid navy fill by default —
   legible against this strip's photo background with no override needed. */
@media (max-width:639px){.pt-inline-cta-row{padding:2rem 1.25rem}}

/* ---------- inline CTA banner: optional background photo ---------- */
.pt-inline-cta--media{position:relative;overflow:hidden;padding:0}
.pt-inline-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt-inline-cta-overlay{position:absolute;inset:0;background:linear-gradient(115deg,#020617f0 0%,#0369a1cc 55%,#0ea5e980 100%)}
.pt-inline-cta--media .pt-inline-cta-content{position:relative;z-index:1;padding:2.25rem 2rem}
.pt-inline-cta--media p{color:#fff}
.pt-inline-cta--media .btn-primary{box-shadow:0 14px 30px -14px rgba(14,165,233,.9)}
@media (min-width:640px){.pt-inline-cta--media{min-height:220px;display:flex;align-items:center}}

/* ---------- use cases: optional photo-card variant (mirrors .industry-img-card) ---------- */
.pt-usecase-box--photo{background:#fff;border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);padding:0;overflow:hidden;border-radius:18px;transition:transform .35s ease,box-shadow .35s ease}
.pt-usecase-box--photo:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pt-usecase-media{aspect-ratio:16/9;overflow:hidden}
.pt-usecase-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pt-usecase-box--photo:hover .pt-usecase-media img{transform:scale(1.06)}
.pt-usecase-box--photo .pt-usecase-body{padding:1.4rem 1.5rem 1.6rem}
.pt-usecase-box--photo h3{margin-bottom:.5rem}

@media (max-width:767px){
  .pt-inline-cta-row{padding:1.5rem 1.1rem}
  .pt-inline-cta--media .pt-inline-cta-content{padding:1.75rem 1.4rem}
}

/* ---------- icon badges — premium, in the site's own blue ----------
   The revamp briefly made these solid blue with a white glyph, which changed
   the palette. Back to the original shade — a pale sky plate with a
   primary-blue glyph — but lifted: a soft gradient, a hairline ring, an
   inner highlight and a blue glow that deepens on hover. */
.pt-feature-icon,.about-card-ico,.about-highlight-ico,.contact-card-ico{
  background:linear-gradient(150deg,#fff 0%,var(--sky-50) 35%,var(--sky-100) 100%) !important;
  color:var(--primary-blue-dark) !important;
  border:1px solid rgba(14,165,233,.2);
  box-shadow:0 10px 24px -14px rgba(14,165,233,.6),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease
}
.pt-feature-icon{width:60px;height:60px;border-radius:18px;font-size:1.55rem}
.pt-feature-card:hover .pt-feature-icon,.about-card:hover .about-card-ico,
.about-highlight:hover .about-highlight-ico,a.contact-card:hover .contact-card-ico{
  transform:translateY(-2px);border-color:rgba(14,165,233,.42);
  box-shadow:0 16px 30px -14px rgba(14,165,233,.75),inset 0 1px 0 rgba(255,255,255,.95)
}

/* ---------- overview pages: photo service cards ---------- */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.75rem;margin-bottom:3.5rem}
.ov-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--gray-100);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.ov-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(14,165,233,.3)}
.ov-card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sky-50)}
.ov-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.ov-card:hover .ov-card-media img{transform:scale(1.06)}
.ov-card-chip{position:absolute;left:.9rem;bottom:.9rem;padding:.32rem .7rem;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(2,6,23,.62);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ov-card-body{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.5rem 1.5rem}
.ov-card-body h3{font-size:1.12rem;font-weight:800;margin-bottom:.5rem}
.ov-card-body h3 a{color:var(--gray-900);text-decoration:none}
.ov-card-body h3 a:hover{color:var(--primary-blue-dark)}
.ov-card-body p{color:var(--gray-600);font-size:.92rem;line-height:1.65;margin:0 0 1.2rem;flex:1}
.ov-card-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
/* Enquire Now (.btn.btn-primary.btn-sm) and Learn More sit side by side, so
   Learn More is built on the exact same box: same padding, radius, weight,
   size, transition as .btn/.btn-sm in site.css — only the fill differs. */
.ov-card-actions{align-items:stretch}
.ov-card-more{
  align-items:center;border:none;border-radius:.75rem;cursor:pointer;display:inline-flex;
  font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;letter-spacing:.02em;
  padding:.625rem 1.5rem;text-decoration:none;white-space:nowrap;
  transition:all .4s cubic-bezier(.4,0,.2,1);
  color:#fff;background:linear-gradient(135deg,#0b2450 0%,#0ea5e9 65%,#e0f2fe 130%);
  box-shadow:0 8px 20px -10px rgba(11,36,80,.6);
}
.ov-card-more:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(11,36,80,.75);background:linear-gradient(135deg,#123166 0%,#0284c7 65%,#f0f9ff 130%);color:#fff}
.ov-card-more svg{width:1em;height:1em;flex:none}
.pt-hero-picture{position:absolute;inset:0;display:block}
.pt-hero-picture .pt-hero-img{position:absolute;inset:0}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE (rebuilt 2026-09-04) — banner, Google-style placeholder form
   in a card, contact cards, map. forms.js still owns validation: it looks
   for .form-group / .phone-field / .phone-cc and paints .is-invalid,
   .field-error and .form-status, all styled here.
   ══════════════════════════════════════════════════════════════════════════ */
/* left-aligned, matching every other page's hero */
.contact-page .pt-hero-overlay{background:linear-gradient(90deg,rgba(2,6,23,.9) 0%,rgba(2,6,23,.72) 42%,rgba(2,6,23,.18) 75%,rgba(2,6,23,0) 100%)}
.contact-page .pt-hero h1,.contact-page .pt-hero-subtitle{max-width:600px}
@media (max-width:767px){
  .contact-page .pt-hero-overlay{background:linear-gradient(180deg,rgba(2,6,23,.35) 0%,rgba(2,6,23,.9) 100%)}
}

.contact-section{padding:3.5rem 0 5rem}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
@media (min-width:1024px){.contact-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:2.5rem}.contact-section{padding:4.5rem 0 6rem}}

/* ---------- form card ---------- */
.contact-form-card{background:#fff;border:1px solid var(--gray-100);border-radius:24px;padding:clamp(1.4rem,3vw,2.5rem);box-shadow:0 24px 60px -30px rgba(2,6,23,.35)}
.contact-form-head h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-bottom:.4rem}
.contact-form-head p{color:var(--gray-600);margin:0 0 1.5rem;font-size:.98rem}
.contact-form-grid{display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:640px){.contact-form-grid{grid-template-columns:1fr 1fr}.cf-span{grid-column:1/-1}}
.contact-form .form-group{margin:0;position:relative}
.cf-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8fa2bd;z-index:2;pointer-events:none;display:grid;transition:color .3s ease}
.cf-field--area .cf-ico{top:1.05rem;transform:none}
.cf-field:focus-within .cf-ico{color:var(--primary-blue)}
.contact-form .cf-input{
  width:100%;border:1px solid #e2e9f5 !important;border-radius:16px !important;padding:.85rem 1rem .85rem 2.6rem !important;
  font:inherit;font-size:.92rem !important;font-weight:500;color:var(--gray-900);background:linear-gradient(180deg,#fff,#fbfdff) !important;
  box-shadow:inset 0 1px 2px rgba(2,6,23,.04);min-height:50px;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;outline:none;-webkit-appearance:none;appearance:none
}
.contact-form .cf-input::placeholder{color:#9bacc4;font-weight:500}
.contact-form .cf-input:hover{border-color:#c8d6ea !important}
.contact-form .cf-input:focus{border-color:var(--primary-blue) !important;box-shadow:0 0 0 4px rgba(14,165,233,.12),0 8px 20px -12px rgba(14,165,233,.55);transform:translateY(-1px)}
.contact-form textarea.cf-input{min-height:120px;resize:vertical;padding-top:.9rem !important}
.contact-form .cf-select{padding-right:2.4rem !important;cursor:pointer;color:var(--gray-900)}
.contact-form .cf-select:invalid,.contact-form .cf-select option[value=""]{color:#9bacc4}
.cf-caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#8fa2bd;pointer-events:none;display:grid}
/* phone: forms.js's <select class="phone-cc"> + input share one rounded shell */
.contact-form .phone-field{display:flex;align-items:stretch;border:1px solid #e2e9f5;border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:inset 0 1px 2px rgba(2,6,23,.04);transition:border-color .3s ease,box-shadow .3s ease;overflow:hidden}
.contact-form .phone-field:focus-within{border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(14,165,233,.12)}
.contact-form .phone-field .phone-cc{border:0;background:transparent;font:inherit;font-size:.85rem;font-weight:700;color:var(--gray-900);padding:0 .5rem 0 .95rem;min-width:96px;outline:none;border-right:1px solid #e2e9f5;cursor:pointer}
.contact-form .phone-field .cf-input{border:0 !important;border-radius:0 !important;box-shadow:none !important;padding-left:1rem !important;min-height:48px;transform:none !important;background:transparent !important}
/* validation states painted by forms.js */
.contact-form .cf-input.is-invalid,.contact-form .phone-field:has(.is-invalid){border-color:#e0393e !important;background:#fffafa !important}
.contact-form .field-error{display:block;margin:.35rem 0 0 .4rem;font-size:.74rem;font-weight:600;color:#d92d33}
.contact-form .form-status{grid-column:1/-1;margin:0 0 1rem;padding:.8rem 1rem;border-radius:12px;font-size:.88rem;font-weight:600;background:var(--sky-50);border:1px solid var(--sky-100);color:var(--gray-800)}
.contact-form .form-status--error{background:#fff5f5;border-color:#fecaca;color:#b91c1c}
.contact-form .form-status--pending{background:var(--sky-50);border-color:var(--sky-100);color:var(--primary-blue-dark)}
.contact-form-card .form-success{display:flex;align-items:center;gap:.9rem;padding:1.4rem 1.5rem;border-radius:16px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-weight:600}
.contact-form-card .form-success svg{flex:none}
.contact-form-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.contact-form-actions .btn{flex:1 1 auto;justify-content:center}
.contact-form .cf-consult{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.3);color:var(--primary-blue-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
.contact-form .cf-consult:hover{background:var(--primary-blue);border-color:var(--primary-blue);color:#fff}
.contact-form-note{margin:.9rem 0 0;font-size:.78rem;color:var(--gray-500);text-align:center}

/* ---------- info cards ---------- */
.contact-side-title{font-size:clamp(1.35rem,2.4vw,1.7rem);margin-bottom:.4rem}
.contact-side-text{color:var(--gray-600);margin:0 0 1.4rem;font-size:.95rem}
.contact-cards{display:grid;gap:.9rem}
.contact-card{display:flex;gap:.95rem;align-items:flex-start;padding:1.15rem 1.2rem;border-radius:18px;background:#fff;border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
a.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(14,165,233,.35)}
.contact-card-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.15rem;color:#fff;background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark));box-shadow:0 10px 22px -12px rgba(14,165,233,.8)}
.contact-card-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.contact-card-body strong{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-blue-dark)}
.contact-card-text{white-space:pre-line;color:var(--gray-800);font-weight:600;line-height:1.55;font-size:.95rem;word-break:break-word}
.contact-card-note{font-size:.8rem;color:var(--gray-500)}
.contact-wa{width:100%;justify-content:center;margin-top:1rem}

/* ---------- map ---------- */
.contact-map{margin-top:3rem}
.contact-map-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.contact-map-head h3{margin:0;font-size:1.3rem}
.contact-map-frame{border-radius:22px;overflow:hidden;border:1px solid var(--gray-200);box-shadow:var(--shadow-lg)}

/* ---------- contact form: validation alignment ----------
   forms.js inserts .field-error as a sibling of the input inside
   .form-group, which made the absolutely-centred icon drift down to the
   middle of group+error. Pin the icon to the input's own 50px height
   instead, and line every message up with the placeholder text. */
.contact-form .cf-field .cf-ico{top:25px;transform:translateY(-50%)}
.contact-form .cf-field--area .cf-ico{top:1.15rem;transform:none}
.contact-form .cf-caret{top:25px;transform:translateY(-50%)}
.contact-form .form-group > .field-error{margin:.4rem 0 0;padding-left:2.6rem;line-height:1.35}
.contact-form .cf-field:has(.is-invalid) .cf-ico{color:#e0393e}
.contact-form .phone-field.is-invalid-shell,.contact-form .phone-field:has(.is-invalid){border-color:#e0393e;background:#fffafa}
.contact-form .cf-input.is-invalid:focus{box-shadow:0 0 0 4px rgba(224,57,62,.13)}

/* ---------- image banner: shorter, everywhere (matches the contact page) ---------- */
.pt-hero{min-height:340px;padding:6.75rem 0 2.5rem}
@media (max-width:767px){.pt-hero{min-height:280px;padding:6rem 0 1.75rem}}
.contact-page .pt-hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:.6rem}
.contact-page .pt-hero-subtitle{margin-bottom:1.1rem;font-size:1.02rem}
.contact-page .pt-hero-stats{margin-top:1.25rem;gap:.6rem}
.contact-page .pt-hero-stat{padding:.6rem .5rem}
.contact-page .pt-hero-stat strong{font-size:1rem}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE (polished 2026-09-04) — image banner, intro with framed photo,
   highlight chips, mission/vision cards. Every string is a field.
   ══════════════════════════════════════════════════════════════════════════ */
.about-page .pt-hero{min-height:360px;padding:7rem 0 3rem}
@media (max-width:767px){.about-page .pt-hero{min-height:300px;padding:6.25rem 0 2rem}}

.about-intro-section{padding:3.5rem 0}
@media (min-width:1024px){.about-intro-section{padding:5rem 0}}
.about-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:2.25rem;align-items:center}
@media (min-width:1024px){.about-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.5rem}}
.about-intro-title{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.01em;margin-bottom:1rem}
.about-intro-text p{font-size:1.04rem;line-height:1.85;color:var(--gray-600);margin:0 0 1.1rem}
.about-highlight-grid{display:grid;grid-template-columns:1fr;gap:.7rem;margin:1.75rem 0 0}
@media (min-width:560px){.about-highlight-grid{grid-template-columns:1fr 1fr}}
.about-highlight{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:14px;background:#fff;border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);font-weight:600;font-size:.94rem;color:var(--gray-800);transition:transform .3s ease,box-shadow .3s ease}
.about-highlight:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.about-highlight-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark));box-shadow:0 8px 18px -10px rgba(14,165,233,.85)}
.about-cta-row{margin-top:2rem}
.about-intro-media{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -35px rgba(2,6,23,.55);border:1px solid var(--gray-100)}
.about-intro-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.about-media-badge{position:absolute;left:1rem;bottom:1rem;padding:.5rem .9rem;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.04em;color:#fff;background:rgba(2,6,23,.68);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.about-cards-section{padding:3.5rem 0;background:var(--sky-50)}
.about-cards-head{text-align:center;max-width:46rem;margin:0 auto 2.25rem}
.about-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem}
.about-card{background:#fff;border:1px solid var(--sky-100);border-radius:22px;padding:2.25rem 1.9rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .35s ease,box-shadow .35s ease}
.about-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.about-card-ico{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:18px;margin-bottom:1.1rem;font-size:1.5rem;color:#fff;background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark));box-shadow:0 12px 26px -12px rgba(14,165,233,.85)}
.about-card h3{font-size:1.2rem;font-weight:800;margin-bottom:.6rem}
.about-card p{color:var(--gray-600);line-height:1.7;margin:0}
.about-sections{padding:0}
.about-sections .pt-body > *:first-child{margin-top:3.5rem}
.about-sections:has(.pt-body > :not(:empty)){padding-bottom:0}
/* The icon library's SVGs carry inline color/font-size/margin from the static
   build (e.g. style="color:var(--primary-blue);font-size:3rem"), which made
   them overflow these gradient badges as solid blobs. Neutralise it. */
.pt-feature-icon svg,.about-card-ico svg,.about-highlight-ico svg,.contact-card-ico svg{
  color:var(--primary-blue-dark) !important;font-size:inherit !important;margin:0 !important;display:block
}
.about-card-ico svg{width:26px;height:26px}
.about-highlight-ico svg{width:18px;height:18px}
.contact-card-ico svg{width:20px;height:20px}
.pt-feature-icon svg{width:26px;height:26px}

/* ---------- feature cards: optional photo instead of the icon badge ---------- */
.pt-feature-card--photo{padding-top:0;overflow:hidden}
.pt-feature-card--photo .pt-feature-media{aspect-ratio:16/10;margin:0 -1.75rem 1.2rem;overflow:hidden}
.pt-feature-card--photo .pt-feature-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pt-feature-card--photo:hover .pt-feature-media img{transform:scale(1.06)}
.pt-feature-card--photo h3,.pt-feature-card--photo p{padding:0 1.75rem}
.pt-feature-card--photo h3{margin-top:0}
.pt-feature-card--photo{padding-bottom:1.75rem}

/* ---------- last SEO-section block: cancel its own trailing margin ----------
   Each block (.pt-brand-table, .pt-process, .pt-benefits, .pt-usecases…) has
   a 3.5rem margin-bottom for the gaps *between* them, but the section
   wrapping .pt-body already adds its own bottom padding — stacking both
   after the very last block nearly doubled the gap before the FAQ. */
.pt-body > *:last-child { margin-bottom: 0 !important; }

/* ---------- About page: Mission/Vision cards with an optional photo ---------- */
.about-card--photo{padding:0;overflow:hidden}
.about-card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.about-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.about-card--photo:hover .about-card-media img{transform:scale(1.06)}
.about-card-media .about-card-ico--onphoto{
  position:absolute;left:1.25rem;bottom:-26px;margin:0;z-index:1;
  border:3px solid #fff;box-shadow:0 10px 24px -10px rgba(2,6,23,.5)
}
.about-card--photo h3{margin:2.1rem 1.9rem 0}
.about-card--photo p{padding:0 1.9rem 2.1rem;margin-top:.6rem}

/* Case-study cards — kill the UA underline.
   .casestudy-card is a whole-card <a> with no text-decoration of its own, so
   the browser default underlines the anchor and it propagates into the card
   title (<h3>) and the result line (.casestudy-result). Block link surface,
   not inline prose: none. Scoped to the card so real inline links keep theirs. */
a.casestudy-card,
a.casestudy-card h3,
a.casestudy-card p,
a.casestudy-card .casestudy-result,
a.casestudy-card:hover,
a.casestudy-card:focus,
a.casestudy-card:hover h3,
a.casestudy-card:hover .casestudy-result{ text-decoration:none }

/* ═══════════════════════════════════════════════════════════════════════════
   INDUSTRY SLIDER — .pt-usecases-slider
   A scroll-snap strip, not a transform carousel: it swipes natively on touch
   and stays usable with JS off, while itt-extend.js layers autoplay, arrows
   and dots on top. Card width is driven here (3-up / 2-up / 1-up), and the JS
   measures the rendered card rather than re-declaring the breakpoints.
   The a.pt-usecase-box display rule in itt-clients.css loads after this file,
   so the flex slide needs the two-class selector to win.
   ═══════════════════════════════════════════════════════════════════════════ */
.pt-usecases-slider{position:relative}

.pt-usecases-viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0 -6px;padding:6px
}
.pt-usecases-viewport::-webkit-scrollbar{display:none}
.pt-usecases-viewport:focus-visible{outline:3px solid var(--primary-blue);outline-offset:2px;border-radius:18px}

.pt-usecases-track{display:flex;align-items:stretch;gap:1.5rem}

.pt-usecase-box.pt-usecase-slide,
a.pt-usecase-box.pt-usecase-slide{
  display:flex;flex-direction:column;
  flex:0 0 calc((100% - 3rem) / 3);
  scroll-snap-align:start
}
.pt-usecase-slide .pt-usecase-body{display:flex;flex-direction:column;flex:1 1 auto}
.pt-usecase-slide .pt-usecase-body p{flex:1 1 auto}
.pt-usecase-slide .pt-usecase-media{flex:0 0 auto}

/* Arrows sit just outside the cards on desktop and fade in with the section. */
.pt-uc-nav{
  position:absolute;top:calc(50% - 1.4rem);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--sky-700);
  box-shadow:0 10px 26px rgba(15,23,42,.16);
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease
}
.pt-uc-nav svg{width:20px;height:20px}
.pt-uc-nav:hover{background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-dark) 100%);color:#fff;transform:translateY(-50%) scale(1.06);box-shadow:0 14px 32px rgba(14,165,233,.36)}
.pt-uc-nav:focus-visible{outline:3px solid var(--primary-blue);outline-offset:3px}
.pt-uc-nav[hidden]{display:none}
.pt-uc-prev{left:-14px}
.pt-uc-next{right:-14px}

.pt-uc-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.4rem}
.pt-uc-dots[hidden]{display:none}
.pt-uc-dot{
  width:9px;height:9px;padding:0;border:none;border-radius:999px;cursor:pointer;
  background:var(--sky-200);transition:width .25s ease,background .25s ease
}
.pt-uc-dot.is-on{width:26px;background:linear-gradient(90deg,var(--primary-blue) 0,var(--primary-blue-dark) 100%)}
.pt-uc-dot:focus-visible{outline:2px solid var(--primary-blue);outline-offset:3px}

@media (max-width:1100px){
  .pt-uc-prev{left:-6px}
  .pt-uc-next{right:-6px}
}
@media (max-width:900px){
  .pt-usecase-box.pt-usecase-slide,
  a.pt-usecase-box.pt-usecase-slide{flex-basis:calc((100% - 1.25rem) / 2)}
  .pt-usecases-track{gap:1.25rem}
  .pt-uc-nav{display:none}
}
@media (max-width:600px){
  .pt-usecase-box.pt-usecase-slide,
  a.pt-usecase-box.pt-usecase-slide{flex-basis:88%}
  .pt-usecases-track{gap:1rem}
  .pt-usecases-viewport{margin:0 -1.25rem;padding:6px 1.25rem;scroll-padding-left:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .pt-usecases-viewport{scroll-behavior:auto}
  .pt-usecase-box--photo,.pt-uc-nav,.pt-uc-dot{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUMBERS BAND — .itt-statband
   The band shipped with no CSS of its own, so the photo rendered at natural
   size and the tiles stacked as raw text. The photo is the background layer,
   a gradient scrim carries the contrast for the white type, and the tiles are
   a glass grid: 4-up, 2-up under 900px, still 2-up but tighter under 520px.
   `isolation:isolate` matters — body:before is a fixed white sheet at z-index
   -1, so the layers here are numbered inside the section's own stacking
   context instead of going negative and disappearing behind it.
   ═══════════════════════════════════════════════════════════════════════════ */
.itt-statband{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(3.25rem,6.5vw,5.5rem) 0;
  color:#fff
}
.itt-statband-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block
}
.itt-statband-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(90% 120% at 15% 0,rgba(14,165,233,.42) 0,rgba(2,6,23,0) 60%),
    linear-gradient(135deg,rgba(2,6,23,.93) 0,rgba(3,105,161,.82) 55%,rgba(2,6,23,.92) 100%)
}
.itt-statband-inner{position:relative;z-index:2}

.itt-statband-head{max-width:46rem;margin:0 auto clamp(1.85rem,3.6vw,2.9rem);text-align:center}
.itt-statband-eyebrow{
  margin:0 0 .65rem;font-size:.76rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sky-300)
}
.itt-statband-heading{
  margin:0;font-family:var(--font-heading);
  font-size:clamp(1.45rem,3vw,2.2rem);font-weight:800;line-height:1.25;
  letter-spacing:-.015em;color:#fff;text-wrap:balance
}

.itt-statband-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.85rem,1.6vw,1.4rem)
}
.itt-statband-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(1.2rem,2.2vw,1.85rem) clamp(.7rem,1.4vw,1.15rem);
  border-radius:18px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -24px rgba(2,6,23,.9);
  transition:transform .3s ease,background .3s ease,border-color .3s ease
}
.itt-statband-tile:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.15);
  border-color:rgba(125,211,252,.55)
}
.itt-statband-value{
  display:block;font-family:var(--font-heading);
  font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums
}
.itt-statband-label{
  display:block;margin-top:.6rem;
  font-size:clamp(.76rem,1.05vw,.9rem);font-weight:600;line-height:1.45;
  color:#dbeafe;text-wrap:balance
}

@media (max-width:900px){
  .itt-statband-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .itt-statband{padding:2.75rem 0}
  .itt-statband-grid{gap:.7rem}
  .itt-statband-tile{padding:1.1rem .65rem;border-radius:14px}
  .itt-statband-value{font-size:1.5rem}
  .itt-statband-label{font-size:.74rem;margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .itt-statband-tile{transition:none}
  .itt-statband-tile:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB ROW — .itt-crumbs
   Moved out of the banner: the trail used to be a translucent pill sitting on
   the hero photo, where it fought the H1 for contrast and was invisible on a
   light image. It is now a white card on the page background, directly under
   the banner, with the row's own spacing tuned so the following section does
   not also pay its full 6rem top padding.
   ═══════════════════════════════════════════════════════════════════════════ */
.itt-crumbs{padding:1.5rem 0 0}

.itt-crumbs-list{
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;
  margin:0;padding:.95rem 1.5rem;list-style:none;
  background:#fff;border:1px solid var(--gray-100);border-radius:18px;
  box-shadow:0 14px 34px -22px rgba(15,23,42,.45)
}
.itt-crumb{display:inline-flex;align-items:center;gap:.15rem .5rem;min-width:0}

.itt-crumb-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.92rem;font-weight:600;color:var(--gray-600);text-decoration:none;
  border-radius:8px;padding:.15rem .1rem;
  transition:color .25s ease
}
.itt-crumb-link:hover{color:var(--primary-blue-dark)}
.itt-crumb-link:focus-visible{outline:2px solid var(--primary-blue);outline-offset:3px}
.itt-crumb-first{color:var(--gray-800)}
.itt-crumb-home{width:17px;height:17px;flex:0 0 auto;color:var(--primary-blue)}

.itt-crumb-sep{display:inline-flex;align-items:center;color:var(--gray-300)}
.itt-crumb-sep svg{width:14px;height:14px}

.itt-crumb-current{
  font-size:.92rem;font-weight:700;color:var(--gray-900);
  overflow-wrap:anywhere
}

/* The banner-to-content rhythm: 1.5rem above the card, 2.75rem below it. */
.itt-crumbs + .section,
.itt-crumbs + .page-template > .section:first-child{padding-top:2.75rem}
.itt-crumbs + section{padding-top:2.75rem}

@media (max-width:767px){
  .itt-crumbs{padding-top:1.1rem}
  .itt-crumbs-list{padding:.8rem 1rem;border-radius:14px;gap:.1rem .4rem}
  .itt-crumb-link,.itt-crumb-current{font-size:.84rem}
  .itt-crumb-home{width:15px;height:15px}
  .itt-crumbs + .section,.itt-crumbs + section{padding-top:2rem}
}
@media (max-width:420px){
  .itt-crumbs-list{padding:.7rem .85rem}
  .itt-crumb-link,.itt-crumb-current{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .itt-crumb-link{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURES MEDIA COLUMN, TWO PHOTOS — .pt-features-media--duo
   One square photo could not fill a column standing beside a six-card grid,
   so the column ended in white space and the sticky rule slid that gap down
   the page with you. Two photos instead: the main one on top, a second card
   overlapping its bottom edge and reaching into the grid gutter, which fills
   the height the way the single image never could. These rules come after the
   min-width:900px block that makes the single image sticky, so the duo has to
   (and does) reset position, aspect-ratio and max-height.
   ═══════════════════════════════════════════════════════════════════════════ */
.pt-features-media--duo{
  position:relative;top:auto;
  border-radius:0;overflow:visible;box-shadow:none;
  aspect-ratio:auto;max-height:none;
  padding-bottom:clamp(76px,11vw,132px)
}
.pt-features-media--duo figure{margin:0}

.pt-media-main{
  border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:4/3
}
.pt-media-sub{
  position:absolute;right:0;bottom:0;width:62%;
  aspect-ratio:16/11;
  border-radius:18px;overflow:hidden;
  border:6px solid #fff;
  box-shadow:0 22px 48px -20px rgba(2,6,23,.55)
}
.pt-media-main img,.pt-media-sub img{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:900px){
  /* Let the smaller card reach into the 2.5rem grid gutter, as in the design. */
  .pt-media-sub{right:-1.5rem;width:66%}
  .pt-media-main{aspect-ratio:1/1}
}
@media (max-width:600px){
  .pt-features-media--duo{padding-bottom:64px}
  .pt-media-sub{width:58%;border-width:5px;border-radius:14px}
}

/* The pair has to fill the column, not just be taller than one photo: the
   feature grid beside it can run to six cards. Stretching the row lets the
   main photo grow to the grid's height, and the smaller card still hangs off
   its bottom edge into the reserved padding. */
.pt-features--with-image{align-items:stretch}
.pt-features-media--duo{
  display:flex;flex-direction:column;height:100%;
  padding-bottom:clamp(56px,7vw,92px)
}
.pt-media-main{flex:1 1 auto;min-height:300px}

@media (min-width:900px){
  .pt-media-main{aspect-ratio:auto}
}
@media (max-width:899px){
  .pt-features-media--duo{height:auto}
  .pt-media-main{aspect-ratio:4/3;min-height:0}
}

/* ══════════════════════════════════════════════════════════════════════
   RESTORED 2026-09-21 — keep this block LAST in the file.
   The 2026-09-17 edit was made on a pre-09-09 copy and silently dropped
   these rules, so the home "One Ecosystem" cards got underlines back and
   Learn more reverted. Rebuilding this file from an older copy will lose them again.

   1) Whole-card links take no underline (UA default propagates into the
      nested <h3>/<p>). Narrow selectors: inline prose links keep theirs.
   2) Every "Learn more" CTA (.solution-more span inside the home cards,
      .ov-card-more on the overview pages) is the header's Get a Quote pill:
      .btn.btn-primary.btn-sm from site.css, including the :before sheen.
   ══════════════════════════════════════════════════════════════════════ */
a.solution-card,a.casestudy-card,a.ov-card,a.ov-card-media,a.ov-card-more,
a.itt-cs-card,a.industry-card,a.industry-img-card,a.itt-dsb-more,a.legal-contact-item,
a.solution-card *,a.casestudy-card *,a.ov-card *,a.itt-cs-card *,
a.industry-card *,a.industry-img-card *,
a.solution-card:hover *,a.solution-card:focus *{ text-decoration:none }

.solution-card .solution-more,
.ov-card-more{
  align-items:center;display:inline-flex;gap:.5rem;justify-content:center;
  background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-dark) 100%);
  border:none;border-radius:.75rem;
  box-shadow:0 8px 25px rgba(14,165,233,.35),0 4px 15px rgba(0,0,0,.1);
  color:var(--white);cursor:pointer;
  font-size:.875rem;font-weight:700;letter-spacing:.02em;line-height:1.5;
  overflow:hidden;padding:.625rem 1.5rem;position:relative;
  text-decoration:none;white-space:nowrap;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.solution-card .solution-more:before,
.ov-card-more:before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  content:"";height:100%;left:-100%;position:absolute;top:0;width:100%;
  transition:left .5s;
}
.solution-card:hover .solution-more,
.ov-card-more:hover,.ov-card-more:focus-visible{
  background:linear-gradient(135deg,var(--primary-blue-light) 0,var(--primary-blue) 100%);
  box-shadow:0 15px 40px rgba(14,165,233,.45),0 8px 25px rgba(0,0,0,.15);
  color:var(--white);gap:.5rem;transform:translateY(-2px);
}
.solution-card:hover .solution-more:before,
.ov-card-more:hover:before{ left:100% }
.solution-card .solution-more svg,.ov-card-more svg{ flex:none;width:1em;height:1em;position:relative }

/* ══════════════════════════════════════════════════════════════════════
   SECTION RHYTHM (client request 2026-09-21) — keep LAST.
   Stacked .section bands opened a 192px trench (96px bottom + 96px top),
   e.g. Industries → Our Process and before Proven Results, causing needless
   scrolling. Now 56px each side (112px between bands); 32px on phones.
   ══════════════════════════════════════════════════════════════════════ */
.section{ padding-top:3.5rem; padding-bottom:3.5rem }
@media (max-width:768px){ .section{ padding-top:2rem; padding-bottom:2rem } }

/* ══════════════════════════════════════════════════════════════════════
   SPLIT SECTION HEADER, COMPACT (client request 2026-09-21) — keep LAST.
   "Industries We Serve" header was 239px: the h2 wrapped and the side text
   dropped onto its own row. Desktop: heading on one line, side text beside
   it on the same row, tighter eyebrow/heading/grid spacing. Phones keep the
   stacked layout, just with less space.
   ══════════════════════════════════════════════════════════════════════ */
.section-header-split{ gap:1.25rem 2.5rem; margin-bottom:2rem; align-items:flex-end }
.section-header-split .section-title{ margin-bottom:.4rem }
.section-header-split .section-heading{ margin-bottom:0 }
.section-header-split .section-side-text{ margin:0; font-size:1rem; line-height:1.6 }
@media (min-width:992px){
  .section-header-split{ flex-wrap:nowrap }
  .section-header-split > div{ flex:0 1 auto; min-width:0 }
  .section-header-split .section-heading{ white-space:nowrap; font-size:clamp(1.75rem,2.5vw,2.35rem) }
  .section-header-split .section-side-text{ flex:1 1 320px; max-width:460px }
}
@media (max-width:991px){ .section-header-split .section-side-text{ max-width:none } }
.section-header-split .section-title:after{ display:none }

/* ══════════════════════════════════════════════════════════════════════
   FIREWALL PAGE (postid-727) — premium centred icon cards (client 2026-09-22).
   "Enterprise Security Capabilities We Deliver" uses icons, not photos.
   Scoped to this page only.
   ══════════════════════════════════════════════════════════════════════ */
.postid-727 .pt-features-grid .pt-feature-card{text-align:center;display:flex;flex-direction:column;align-items:center;padding:2.1rem 1.6rem 1.9rem;position:relative;overflow:hidden}
.postid-727 .pt-features-grid .pt-feature-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--primary-blue-dark),var(--primary-blue-light));opacity:.85}
.postid-727 .pt-features-grid .pt-feature-icon{
  width:78px;height:78px;border-radius:24px;font-size:2rem;margin:0 auto 1.25rem;
  color:#fff !important;border:0;
  background:linear-gradient(145deg,#0b2450 0%,var(--primary-blue-dark) 55%,var(--primary-blue-light) 100%) !important;
  box-shadow:0 14px 30px -12px rgba(2,132,199,.65),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 6px rgba(14,165,233,.08);
  transition:transform .35s ease,box-shadow .35s ease
}
.postid-727 .pt-features-grid .pt-feature-icon svg{width:1em;height:1em;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.postid-727 .pt-features-grid .pt-feature-card:hover .pt-feature-icon{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 38px -12px rgba(2,132,199,.8),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 8px rgba(14,165,233,.12)}
.postid-727 .pt-features-grid .pt-feature-card h3{margin-bottom:.6rem}
.postid-727 .pt-features-grid .pt-feature-icon svg,.postid-727 .pt-features-grid .pt-feature-icon svg *{fill:#fff !important;color:#fff !important}
.postid-727 .pt-features-grid .pt-feature-icon svg [stroke]:not([stroke="none"]){stroke:#fff !important}
.postid-727 .pt-features-grid .pt-feature-icon img{filter:brightness(0) invert(1);width:1em;height:1em}


/* ══════════════════════════════════════════════════════════════════════
   ALL INNER SERVICE PAGES (2026-09-22): same premium centred icon cards as
   the Firewall page reference. Generated from the postid-727 block above;
   keep the two in sync.
   ══════════════════════════════════════════════════════════════════════ */
.single-itt_service .pt-features-grid .pt-feature-card{text-align:center;display:flex;flex-direction:column;align-items:center;padding:2.1rem 1.6rem 1.9rem;position:relative;overflow:hidden}
.single-itt_service .pt-features-grid .pt-feature-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--primary-blue-dark),var(--primary-blue-light));opacity:.85}
.single-itt_service .pt-features-grid .pt-feature-icon{
  width:78px;height:78px;border-radius:24px;font-size:2rem;margin:0 auto 1.25rem;
  color:#fff !important;border:0;
  background:linear-gradient(145deg,#0b2450 0%,var(--primary-blue-dark) 55%,var(--primary-blue-light) 100%) !important;
  box-shadow:0 14px 30px -12px rgba(2,132,199,.65),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 6px rgba(14,165,233,.08);
  transition:transform .35s ease,box-shadow .35s ease
}
.single-itt_service .pt-features-grid .pt-feature-icon svg{width:1em;height:1em;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.single-itt_service .pt-features-grid .pt-feature-card:hover .pt-feature-icon{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 38px -12px rgba(2,132,199,.8),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 8px rgba(14,165,233,.12)}
.single-itt_service .pt-features-grid .pt-feature-card h3{margin-bottom:.6rem}
.single-itt_service .pt-features-grid .pt-feature-icon svg,.single-itt_service .pt-features-grid .pt-feature-icon svg *{fill:#fff !important;color:#fff !important}
.single-itt_service .pt-features-grid .pt-feature-icon svg [stroke]:not([stroke="none"]){stroke:#fff !important}
.single-itt_service .pt-features-grid .pt-feature-icon img{filter:brightness(0) invert(1);width:1em;height:1em}

/* Firewall page (post 727) only, 2026-09-28: the two button CTA strips use the
   page's own firewall images instead of the site-wide circuit-board photo. */
.postid-727 [data-testid="page-cta-strip-1"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/multi-brand-enterprise-firewall-appliances-fortinet-palo-alto-cisco-sophos-juniper-1920x344.jpg') center/cover
}
.postid-727 [data-testid="page-cta-strip-2"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/firewall-threat-protection-phishing-ddos-zero-day-secure-branch-offices-data-center-1920x324.jpg') center/cover
}

/* Networking page (post 126) only, 2026-09-28: same treatment as the firewall page. */
.postid-126 [data-testid="page-cta-strip-1"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/office-network-planning-aruba-wifi-cisco-switch-hikvision-cctv-rack-1920x344.jpg') center/cover
}
.postid-126 [data-testid="page-cta-strip-2"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/enterprise-networking-wifi-structured-cabling-firewall-server-rack-services-1920x324.jpg') center/cover
}

/* Servers & storage page (post 127) only, 2026-09-28: CTA strips + show the whole banner photo
   (it is 2.8:1 in a 4.17:1 box) over a blurred copy of itself instead of cropping it. */
.postid-127 [data-testid="page-cta-strip-1"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/data-center-servers-storage-dell-emc-hpe-lenovo-ibm-netapp-synology-qnap-1920x768.jpg') center/cover
}
.postid-127 [data-testid="page-cta-strip-2"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/server-rack-installation-supermicro-dell-hpe-netapp-storage-monitoring.jpg') center/cover
}
@media (min-width:768px){
  .postid-127 .pt-hero{background:#020617 url('https://ittraders.in/wp-content/uploads/2026/10/server-storage-dell-hpe-lenovo-ibm-netapp-supermicro-banner.webp') center/cover}
  .postid-127 .pt-hero-img{object-fit:contain !important;backdrop-filter:blur(18px) brightness(.6)}
}

/* CCTV page (post 128) only, 2026-09-28: CTA strips use the page's own CCTV images. */
.postid-128 [data-testid="page-cta-strip-1"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/cctv-cameras-nvr-poe-switch-wd-purple-hikvision-dahua-bosch-axis-cp-plus-1920x344.jpg') center/cover
}
.postid-128 [data-testid="page-cta-strip-2"]{
  background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/cctv-installation-engineers-hikvision-dahua-bosch-uniview-axis-cp-plus-1920x324.jpg') center/cover
}

/* Closing CTA band (.pt-cta) gets each page's own photo under the original gradient, 2026-09-28. */
.postid-727 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/09/firewall-threat-protection-phishing-ddos-zero-day-secure-branch-offices-data-center-1920x324.jpg') center/cover}
.postid-126 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/09/network-infrastructure-design-installation-fortinet-cisco-aruba-panduit-hikvision.jpg') center/cover}
.postid-127 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/09/server-rack-installation-supermicro-dell-hpe-netapp-storage-monitoring.jpg') center/cover}
.postid-128 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/09/cctv-surveillance-solutions-hikvision-dahua-bosch-axis-hanwha-uniview-nvr-1920x724.jpg') center/cover}

/* Leased-line page (post 129) only, 2026-09-28: CTA strips + closing band use the page's own images. */
.postid-129 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/leased-line-installation-telecom-tower-fiber-router-it-traders-engineer-1920x344.jpg') center/cover}
.postid-129 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/high-speed-leased-line-fiber-network-city-connectivity-telecom-tower-1920x324.jpg') center/cover}
.postid-129 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/09/internet-leased-line-fiber-satellite-enterprise-router-switch-connectivity.jpg') center/cover}

/* Laptop & desktop page (post 705) only, 2026-09-28: CTA strips + closing band use the page's own images. */
.postid-705 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/corporate-laptop-desktop-rental-dell-hp-lenovo-asus-monitors-1920x344.jpg') center/cover}
.postid-705 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/laptop-desktop-buy-new-rent-service-support-dell-hp-lenovo-1920x324.jpg') center/cover}
.postid-705 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/business-laptops-desktops-dell-hp-lenovo-rental-pune.webp') center/cover}

/* Managed SOC/NOC page (post 707) only, 2026-09-28: CTA strips + closing band use the page's own images. */
.postid-707 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/managed-soc-24x7-monitoring-cyber-threat-protection-analysts-1920x344.jpg') center/cover}
.postid-707 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/noc-network-operations-center-team-monitoring-dashboards-1920x324.jpg') center/cover}
.postid-707 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/managed-soc-noc-team-24x7-security-monitoring-dashboards.webp') center/cover}

/* Cloud page (post 130) only, 2026-09-28: CTA strips + closing band use the page's own images. */
.postid-130 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/cloud-hosting-data-centers-aws-google-cloud-yotta-1920x344.jpg') center/cover}
.postid-130 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/cloud-connectivity-aws-google-cloud-yotta-servers-1920x324.jpg') center/cover}
.postid-130 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/multi-cloud-yotta-aws-google-cloud-hosting-india.webp') center/cover}

/* Microsoft 365 page (post 131) only, 2026-09-28: CTA strips + closing band use the page's own images. */
.postid-131 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/microsoft-365-apps-office-team-word-excel-teams-sharepoint-1920x344.jpg') center/cover}
.postid-131 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/microsoft-365-cloud-productivity-collaboration-onedrive-teams-1920x324.jpg') center/cover}
.postid-131 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/microsoft-365-business-team-collaboration-teams-sharepoint.webp') center/cover}

/* Email security page (post 132) only, 2026-09-28: CTA strips + closing band use the page's own images. */
.postid-132 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/secure-email-gateway-anti-phishing-email-archiving-1920x344.jpg') center/cover}
.postid-132 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/business-email-protection-spam-phishing-filter-cloud-archive-1920x324.jpg') center/cover}
.postid-132 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/business-email-security-threat-protection-encrypted-mail.webp') center/cover}

/* IT compliance page (post 134) only, 2026-09-28: CTA strips + closing band; desktop banner shown whole
   (2.65:1 photo with industry labels at the bottom, in a 3.83:1 box) over a blurred copy. */
.postid-134 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/compliance-consulting-healthcare-banking-manufacturing-retail-it-government-1920x344.jpg') center/cover}
.postid-134 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/risk-assessment-audit-readiness-iso-27001-gdpr-nist-pci-dss-hipaa-soc2-rbi-1920x324.jpg') center/cover}
.postid-134 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/it-compliance-risk-assessment-audit-readiness-iso-nist.webp') center/cover}
@media (min-width:768px){
  .postid-134 .pt-hero{background:#020617 url('https://ittraders.in/wp-content/uploads/2026/09/it-compliance-by-industry-healthcare-bfsi-manufacturing-retail-government.jpg') center/cover}
  .postid-134 .pt-hero-img{object-fit:contain !important;backdrop-filter:blur(18px) brightness(.6)}
}

/* EDR/XDR page (post 133) only, 2026-09-28: CTA strips + closing band use the page's own images. */
.postid-133 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/xdr-extended-detection-response-malware-ransomware-blocking-1920x344.jpg') center/cover}
.postid-133 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/09/edr-endpoint-detection-response-threat-monitoring-dashboard-1920x324.jpg') center/cover}
.postid-133 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/xdr-threat-detection-response-global-endpoint-security.webp') center/cover}

/* IT Projects pages, 2026-10-04: CTA strips + closing band use each page's own images. */
.postid-135 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/end-to-end-it-infrastructure-cta-background-it-traders.jpg') center/cover}
.postid-135 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/end-to-end-it-infrastructure-cta-background-wide-it-traders.jpg') center/cover}
.postid-135 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/it-infrastructure-firewall-wifi-laptops-ip-phone-cctv.webp') center/cover}
.postid-136 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/managed-wifi-solutions-cta-background-it-traders.jpg') center/cover}
.postid-136 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/managed-wifi-solutions-cta-background-wide-it-traders.jpg') center/cover}
.postid-136 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/enterprise-managed-wifi-access-points-poe-switch.webp') center/cover}
.postid-137 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/network-design-structured-cabling-cta-background-it-traders.jpg') center/cover}
.postid-137 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/network-design-structured-cabling-cta-background-wide-it-traders.jpg') center/cover}
.postid-137 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/network-design-cisco-aruba-switches-engineer-office.webp') center/cover}
.postid-138 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/cybersecurity-soc-services-cta-background-it-traders.jpg') center/cover}
.postid-138 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/cybersecurity-soc-services-cta-background-wide-it-traders.jpg') center/cover}
.postid-138 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/cybersecurity-operations-centre-firewalls-network-security.webp') center/cover}
.postid-139 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/it-amc-annual-maintenance-contract-cta-background-it-traders.jpg') center/cover}
.postid-139 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/it-amc-annual-maintenance-contract-cta-background-wide-it-traders.jpg') center/cover}
.postid-139 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/it-amc-annual-maintenance-server-room-network-racks.webp') center/cover}
.postid-140 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/audio-video-av-solutions-cta-background-it-traders.jpg') center/cover}
.postid-140 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/audio-video-av-solutions-cta-background-wide-it-traders.jpg') center/cover}
.postid-140 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/boardroom-av-video-conferencing-display-projector-rack.webp') center/cover}
.postid-141 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/voip-business-phone-solutions-cta-background-it-traders.jpg') center/cover}
.postid-141 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/voip-business-phone-solutions-cta-background-wide-it-traders.jpg') center/cover}
.postid-141 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/business-voip-ip-phones-conference-phone-office.webp') center/cover}
.postid-864 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/website-development-services-cta-background-it-traders.jpg') center/cover}
.postid-864 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/website-development-services-cta-background-wide-it-traders.jpg') center/cover}
.postid-864 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/website-design-development-ui-ux-responsive-mobile.webp') center/cover}
.postid-866 [data-testid="page-cta-strip-1"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/custom-software-development-cta-background-it-traders.jpg') center/cover}
.postid-866 [data-testid="page-cta-strip-2"]{background:linear-gradient(120deg,#020617f0 0%,#0b4a7ae0 55%,#0ea5e9b3 100%),url('https://ittraders.in/wp-content/uploads/2026/10/custom-software-development-cta-background-wide-it-traders.jpg') center/cover}
.postid-866 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/custom-software-development-developer-office.webp') center/cover}

/* Happy Clients halo, 2026-10-04: 24 client logos. Fixed slots (no overlaps, clear of the copy), uniform tiles,
   readable square logos; on phones two rows that glide side to side instead of a 66%-scaled swipe strip. */
@media (min-width:1241px){
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(1){--tx:-430px!important;--ty:-228px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(2){--tx:-255px!important;--ty:-232px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(3){--tx:-85px!important;--ty:-226px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(4){--tx:85px!important;--ty:-226px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(5){--tx:255px!important;--ty:-232px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(6){--tx:430px!important;--ty:-228px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(7){--tx:610px!important;--ty:-171px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(8){--tx:430px!important;--ty:-114px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(9){--tx:610px!important;--ty:-57px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(10){--tx:430px!important;--ty:0px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(11){--tx:610px!important;--ty:57px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(12){--tx:430px!important;--ty:114px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(13){--tx:610px!important;--ty:171px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(14){--tx:430px!important;--ty:228px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(15){--tx:110px!important;--ty:226px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(16){--tx:-110px!important;--ty:226px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(17){--tx:-430px!important;--ty:228px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(18){--tx:-610px!important;--ty:171px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(19){--tx:-430px!important;--ty:114px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(20){--tx:-610px!important;--ty:57px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(21){--tx:-430px!important;--ty:0px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(22){--tx:-610px!important;--ty:-57px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(23){--tx:-430px!important;--ty:-114px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(24){--tx:-610px!important;--ty:-171px!important}
 .itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(25){display:none}
 .itt-ph{padding:18px 0 22px}
 .itt-ph-stage{min-height:548px}
 section.itt-ph{padding:18px 0 22px}
 .itt-ph .itt-ph-stage{min-height:548px}
 .itt-ph .itt-ph-intro{line-height:1.55}
 .itt-ph .itt-ph-plate{width:150px;min-width:150px;max-width:150px;height:84px;padding:12px 14px;background:#fff!important}
 .itt-ph .itt-ph-plate img{width:auto!important;height:auto!important;max-width:122px!important;max-height:52px!important}
}
@media (max-width:1240px){
 .itt-ph .itt-ph-stage{display:block;min-height:0;text-align:center}
 .itt-ph .itt-ph-copy{max-width:640px;margin:0 auto 1.25rem}
 .itt-ph .itt-ph-tile{position:relative;left:auto;top:auto;opacity:1;transform:none!important;transition:none}
 .itt-ph.is-in .itt-ph-tile .itt-ph-plate{animation:none}
 .itt-ph{padding:30px 0 26px}
 section.itt-ph{padding:30px 0 26px}
 .itt-ph .itt-ph-copy{margin-bottom:1.25rem}
 .itt-ph .itt-ph-tiles{position:relative;inset:auto;display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:12px;width:max-content;
  overflow:visible;margin:0 0 0 -24px;padding:8px 16px 16px;scroll-snap-type:none;transform:none;animation:ittPhPan 48s ease-in-out infinite alternate}
 .itt-ph .itt-ph-tiles:active{animation-play-state:paused}
 .itt-ph .itt-ph-plate{width:128px;min-width:128px;max-width:128px;height:72px;padding:8px 10px;background:#fff!important}
 .itt-ph .itt-ph-plate img{width:auto!important;height:auto!important;max-width:104px!important;max-height:44px!important}
}
@keyframes ittPhPan{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100vw))}}
@media (prefers-reduced-motion:reduce){.itt-ph .itt-ph-tiles{animation:none}}

/* Solutions by Industry slider, 2026-10-04: "Explore this industry" uses the same Get a Quote pill as every Learn-more CTA. */
.pt-usecase-slide .pt-usecase-more{
  align-self:flex-start;align-items:center;display:inline-flex;gap:.5rem;justify-content:center;margin-top:1rem;
  background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-dark) 100%);
  border:none;border-radius:.75rem;
  box-shadow:0 8px 25px rgba(14,165,233,.35),0 4px 15px rgba(0,0,0,.1);
  color:var(--white);cursor:pointer;
  font-size:.875rem;font-weight:700;letter-spacing:.02em;line-height:1.5;
  overflow:hidden;padding:.625rem 1.5rem;position:relative;
  text-decoration:none;white-space:nowrap;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.pt-usecase-slide .pt-usecase-more:before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  content:"";height:100%;left:-100%;position:absolute;top:0;width:100%;transition:left .5s;
}
.pt-usecase-slide:hover .pt-usecase-more,.pt-usecase-slide:focus-visible .pt-usecase-more{
  background:linear-gradient(135deg,var(--primary-blue-light) 0,var(--primary-blue) 100%);
  box-shadow:0 15px 40px rgba(14,165,233,.45),0 8px 25px rgba(0,0,0,.15);
  color:var(--white);transform:translateY(-2px);
}
.pt-usecase-slide:hover .pt-usecase-more:before{left:100%}
.pt-usecase-slide .pt-usecase-more svg{flex:none;width:1em;height:1em;position:relative;margin:0;transform:none}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE PASS (2026-10-05) — keep LAST. Phones/tablets only; desktop untouched.
   1) Every button group stacks into equal-width, centred buttons; long labels wrap instead of clipping.
   2) Brand comparison tables become labelled cards (no sideways scroll, nothing hidden).
   3) Legal tables fit the screen.  4) Industry slider no longer pokes 4px past the viewport.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* 1 — CTA button groups */
  .itt-cta-row,.cta-buttons,.hero-video-buttons{
    display:flex !important;flex-direction:column !important;align-items:stretch !important;
    flex-wrap:nowrap !important;gap:.75rem !important;width:100%}
  .itt-cta-row>.btn,.cta-buttons>.btn,.hero-video-buttons>.btn,
  .pt-inline-cta .btn,.pt-inline-cta-content>.btn{
    width:100% !important;max-width:100%;margin:0 !important;justify-content:center;text-align:center;
    white-space:normal !important;line-height:1.35;min-height:48px}
  /* centred strips and bands: keep the buttons a comfortable width, centred */
  .pt-inline-cta-row,.cta-buttons,.pt-cta .itt-cta-row,.cta-section .itt-cta-row{align-items:center !important}
  .pt-inline-cta-row>.btn,.cta-buttons>.btn,.pt-cta .itt-cta-row>.btn{max-width:340px}
  .pt-inline-cta-row{padding:1.75rem 1.25rem !important}
  .pt-cta-inner{text-align:center}
  .pt-inline-cta--media .pt-inline-cta-content{width:100%;text-align:left}

  /* 2 — brand comparison table → cards */
  .pt-brand-table-scroll{overflow:visible !important;border:0 !important;box-shadow:none !important;border-radius:0 !important}
  .pt-brand-table table{min-width:0 !important;width:100%;background:transparent;border-collapse:separate}
  .pt-brand-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pt-brand-table tbody,.pt-brand-table tr,.pt-brand-table td{display:block;width:100%}
  .pt-brand-table tbody tr{background:#fff;border:1px solid var(--gray-200) !important;border-radius:14px;
    box-shadow:var(--shadow-sm);padding:.35rem 1rem;margin:0 0 .85rem}
  .pt-brand-table tbody tr:hover{background:#fff}
  .pt-brand-table td{padding:.6rem 0 !important;border-top:1px dashed var(--gray-200);font-size:.9rem;white-space:normal !important}
  .pt-brand-table td:first-child{border-top:0;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.75rem 0 .65rem !important}
  .pt-brand-table td:nth-child(n+2):before{display:block;margin-bottom:.15rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--primary-blue-dark)}
  .pt-brand-table td:nth-child(2):before{content:"Target Use Case"}
  .pt-brand-table td:nth-child(3):before{content:"Key Highlights"}
  .pt-brand-table td:nth-child(4):before{content:"Sourcing & Support"}

  /* 3 — legal tables (privacy policy cookie table) */
  .legal-content table{display:table !important;width:100% !important;table-layout:fixed;overflow:visible !important}
  .legal-content th,.legal-content td{padding:.5rem .45rem !important;font-size:.82rem;overflow-wrap:anywhere;word-break:break-word}

  /* 4 — industry slider stays inside the viewport */
  .pt-usecases-viewport{margin:0 !important;padding:6px 0 !important}
}

/* MOBILE PASS addendum (2026-10-05): brand-table cards also on small tablets (768–900px), and contact buttons wrap. */
@media (min-width:768px) and (max-width:900px){
  /* 2 — brand comparison table → cards */
  .pt-brand-table-scroll{overflow:visible !important;border:0 !important;box-shadow:none !important;border-radius:0 !important}
  .pt-brand-table table{min-width:0 !important;width:100%;background:transparent;border-collapse:separate}
  .pt-brand-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pt-brand-table tbody,.pt-brand-table tr,.pt-brand-table td{display:block;width:100%}
  .pt-brand-table tbody tr{background:#fff;border:1px solid var(--gray-200) !important;border-radius:14px;
    box-shadow:var(--shadow-sm);padding:.35rem 1rem;margin:0 0 .85rem}
  .pt-brand-table tbody tr:hover{background:#fff}
  .pt-brand-table td{padding:.6rem 0 !important;border-top:1px dashed var(--gray-200);font-size:.9rem;white-space:normal !important}
  .pt-brand-table td:first-child{border-top:0;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.75rem 0 .65rem !important}
  .pt-brand-table td:nth-child(n+2):before{display:block;margin-bottom:.15rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--primary-blue-dark)}
  .pt-brand-table td:nth-child(2):before{content:"Target Use Case"}
  .pt-brand-table td:nth-child(3):before{content:"Key Highlights"}
  .pt-brand-table td:nth-child(4):before{content:"Sourcing & Support"}

}
@media (max-width:767px){
  .contact-form-actions{flex-wrap:wrap}
  .contact-form-actions .btn{white-space:normal !important;text-align:center;justify-content:center;max-width:100%;line-height:1.35}
}

/* Header "Call Now" menu item (2026-10-05): the CMS menu item is a tel: link; the theme walker drops item classes, so target the href. */
.navbar-menu > a.nav-link[href^="tel:"]{display:inline-flex;align-items:center;gap:.45rem;color:var(--primary-blue-dark);font-weight:700}
.navbar-menu > a.nav-link[href^="tel:"]:before{content:"";flex:none;width:1.05em;height:1.05em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.navbar-menu > a.nav-link[href^="tel:"]:hover{color:var(--primary-blue)}

/* Header "Call Now" = Get a Quote twin (2026-10-05, client request): on desktop the tel: menu item is the SAME pill as
   .navbar-actions .btn.btn-primary.btn-sm — same gradient, size, radius, shadow, hover — and the two sit side by side.
   Mobile drawer (<=1024px) keeps the text + phone-icon look above. */
@media (min-width:1025px){
  .navbar-menu{margin-left:auto}
  .navbar-actions{margin-left:.75rem}
  .navbar-menu > a.nav-link[href^="tel:"],.navbar-actions > .btn.btn-sm{min-width:9.5rem;height:42px;box-sizing:border-box;justify-content:center}
  .navbar-menu > a.nav-link[href^="tel:"]{padding:.625rem 1.5rem;border-radius:.75rem;font-size:.875rem;font-weight:700;letter-spacing:.02em;
    color:#fff;background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-dark) 100%);
    box-shadow:0 8px 25px #0ea5e959,0 4px 15px #0000001a;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}
  .navbar-menu > a.nav-link[href^="tel:"]:hover{color:#fff;background:linear-gradient(135deg,var(--primary-blue-light) 0,var(--primary-blue) 100%);
    box-shadow:0 15px 40px #0ea5e973,0 8px 25px #00000026;transform:translateY(-3px)}
  .navbar-menu > a.nav-link[href^="tel:"]:after{display:none}
  .navbar-menu .nav-link{white-space:nowrap}
}
@media (min-width:1025px) and (max-width:1279px){
  .navbar-menu{gap:1.1rem}
  .navbar-menu > a.nav-link[href^="tel:"],.navbar-actions > .btn.btn-sm{min-width:8.25rem;padding:.625rem 1rem}
  .navbar-actions{margin-left:.6rem}
}

/* Happy Clients / partner halo heading at 50% size, sitewide (2026-10-08) */
section.itt-ph .itt-ph-copy .itt-ph-heading{font-size:clamp(.875rem,1.6vw,1.3rem)}

/* Halo logo tiles 20% smaller, sitewide (2026-10-08) — plate and logo box both x0.8; object-fit keeps logos uncropped */
@media (min-width:1241px){
 section.itt-ph .itt-ph-plate{width:120px;min-width:120px;max-width:120px;height:67px;padding:10px 11px}
 section.itt-ph .itt-ph-plate img{max-width:98px!important;max-height:42px!important;object-fit:contain}
}
@media (max-width:1240px){
 section.itt-ph .itt-ph-plate{width:102px;min-width:102px;max-width:102px;height:58px;padding:6px 8px}
 section.itt-ph .itt-ph-plate img{max-width:83px!important;max-height:35px!important;object-fit:contain}
}

/* Halo section 20% shorter on desktop (2026-10-08): tiles pulled 20% closer vertically, stage height to match */
@media (min-width:1241px){
 section.itt-ph .itt-ph-stage{min-height:440px}
 section.itt-ph.is-in .itt-ph-tiles .itt-ph-tile{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) * .8))}
}

/* Halo restored to an OVAL on desktop (2026-10-08): two elliptical rings, overlap-checked; 24 tiles home, 26 elsewhere */
@media (min-width:1241px){
 section.itt-ph.is-in .itt-ph-tiles .itt-ph-tile{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty)))}
 section.itt-ph .itt-ph-stage{min-height:557px}
 section.itt-ph .itt-ph-stage:has(.itt-ph-tile:nth-child(26)){min-height:597px}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(1):nth-last-child(24){display:block!important;--tx:449px!important;--ty:9px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(2):nth-last-child(23){display:block!important;--tx:350px!important;--ty:104px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(3):nth-last-child(22){display:block!important;--tx:116px!important;--ty:159px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(4):nth-last-child(21){display:block!important;--tx:-161px!important;--ty:154px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(5):nth-last-child(20){display:block!important;--tx:-377px!important;--ty:90px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(6):nth-last-child(19){display:block!important;--tx:-449px!important;--ty:-9px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(7):nth-last-child(18){display:block!important;--tx:-350px!important;--ty:-104px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(8):nth-last-child(17){display:block!important;--tx:-116px!important;--ty:-159px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(9):nth-last-child(16){display:block!important;--tx:161px!important;--ty:-154px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(10):nth-last-child(15){display:block!important;--tx:377px!important;--ty:-90px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(11):nth-last-child(14){display:block!important;--tx:618px!important;--ty:60px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(12):nth-last-child(13){display:block!important;--tx:485px!important;--ty:150px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(13):nth-last-child(12){display:block!important;--tx:256px!important;--ty:211px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(14):nth-last-child(11){display:block!important;--tx:-24px!important;--ty:230px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(15):nth-last-child(10){display:block!important;--tx:-299px!important;--ty:203px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(16):nth-last-child(9){display:block!important;--tx:-515px!important;--ty:137px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(17):nth-last-child(8){display:block!important;--tx:-629px!important;--ty:43px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(18):nth-last-child(7){display:block!important;--tx:-618px!important;--ty:-60px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(19):nth-last-child(6){display:block!important;--tx:-485px!important;--ty:-150px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(20):nth-last-child(5){display:block!important;--tx:-256px!important;--ty:-211px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(21):nth-last-child(4){display:block!important;--tx:24px!important;--ty:-230px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(22):nth-last-child(3){display:block!important;--tx:299px!important;--ty:-203px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(23):nth-last-child(2){display:block!important;--tx:515px!important;--ty:-137px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(24):nth-last-child(1){display:block!important;--tx:629px!important;--ty:-43px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(1):nth-last-child(26){display:block!important;--tx:440px!important;--ty:0px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(2):nth-last-child(25){display:block!important;--tx:370px!important;--ty:92px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(3):nth-last-child(24){display:block!important;--tx:183px!important;--ty:155px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(4):nth-last-child(23){display:block!important;--tx:-63px!important;--ty:168px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(5):nth-last-child(22){display:block!important;--tx:-288px!important;--ty:128px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(6):nth-last-child(21){display:block!important;--tx:-422px!important;--ty:48px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(7):nth-last-child(20){display:block!important;--tx:-422px!important;--ty:-48px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(8):nth-last-child(19){display:block!important;--tx:-288px!important;--ty:-128px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(9):nth-last-child(18){display:block!important;--tx:-63px!important;--ty:-168px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(10):nth-last-child(17){display:block!important;--tx:183px!important;--ty:-155px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(11):nth-last-child(16){display:block!important;--tx:370px!important;--ty:-92px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(12):nth-last-child(15){display:block!important;--tx:640px!important;--ty:0px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(13):nth-last-child(14){display:block!important;--tx:585px!important;--ty:102px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(14):nth-last-child(13){display:block!important;--tx:428px!important;--ty:186px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(15):nth-last-child(12){display:block!important;--tx:198px!important;--ty:238px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(16):nth-last-child(11){display:block!important;--tx:-67px!important;--ty:249px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(17):nth-last-child(10){display:block!important;--tx:-320px!important;--ty:217px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(18):nth-last-child(9){display:block!important;--tx:-518px!important;--ty:147px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(19):nth-last-child(8){display:block!important;--tx:-626px!important;--ty:52px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(20):nth-last-child(7){display:block!important;--tx:-626px!important;--ty:-52px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(21):nth-last-child(6){display:block!important;--tx:-518px!important;--ty:-147px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(22):nth-last-child(5){display:block!important;--tx:-320px!important;--ty:-217px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(23):nth-last-child(4){display:block!important;--tx:-67px!important;--ty:-249px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(24):nth-last-child(3){display:block!important;--tx:198px!important;--ty:-238px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(25):nth-last-child(2){display:block!important;--tx:428px!important;--ty:-186px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(26):nth-last-child(1){display:block!important;--tx:585px!important;--ty:-102px!important}
}
@media (min-width:1241px) and (max-width:1400px){section.itt-ph .itt-ph-copy{max-width:360px}}

/* Halo on tablet/phone (2026-10-08): 3 rows, one slow pass when the section scrolls into view, then it stops — no back-and-forth repeat */
@media (max-width:1240px){
 section.itt-ph .itt-ph-tiles{grid-template-rows:repeat(3,auto);gap:10px;animation:none}
 section.itt-ph.is-in .itt-ph-tiles{animation:ittPhPan 36s ease-in-out 1s 1 forwards}
}
@media (max-width:1240px) and (prefers-reduced-motion:reduce){section.itt-ph.is-in .itt-ph-tiles{animation:none}}
@media (min-width:1241px) and (max-width:1400px){
 section.itt-ph .itt-ph-copy{max-width:420px}
 section.itt-ph .itt-ph-tiles{--s:1}
 section.itt-ph.is-in .itt-ph-tiles .itt-ph-tile{transform:translate(calc(-50% + var(--tx) * .9),calc(-50% + var(--ty)))}
}
@media (min-width:1241px) and (max-width:1300px){
 section.itt-ph.is-in .itt-ph-tiles .itt-ph-tile{transform:translate(calc(-50% + var(--tx) * .86),calc(-50% + var(--ty)))}
}
@media (min-width:1241px) and (max-width:1300px){
 section.itt-ph.is-in .itt-ph-tiles .itt-ph-tile{transform:translate(calc(-50% + var(--tx) * .86),calc(-50% + var(--ty))) scale(.88)}
}

/* Oval v2 (2026-10-08): logos evenly spaced along two concentric ellipses (arc-length), overlap-checked */
@media (min-width:1241px){
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(1):nth-last-child(24){display:block!important;--tx:332px!important;--ty:77px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(2):nth-last-child(23){display:block!important;--tx:174px!important;--ty:154px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(3):nth-last-child(22){display:block!important;--tx:0px!important;--ty:175px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(4):nth-last-child(21){display:block!important;--tx:-175px!important;--ty:154px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(5):nth-last-child(20){display:block!important;--tx:-332px!important;--ty:77px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(6):nth-last-child(19){display:block!important;--tx:-332px!important;--ty:-77px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(7):nth-last-child(18){display:block!important;--tx:-174px!important;--ty:-154px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(8):nth-last-child(17){display:block!important;--tx:0px!important;--ty:-175px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(9):nth-last-child(16){display:block!important;--tx:175px!important;--ty:-154px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(10):nth-last-child(15){display:block!important;--tx:332px!important;--ty:-77px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(11):nth-last-child(14){display:block!important;--tx:512px!important;--ty:156px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(12):nth-last-child(13){display:block!important;--tx:314px!important;--ty:227px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(13):nth-last-child(12){display:block!important;--tx:104px!important;--ty:257px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(14):nth-last-child(11){display:block!important;--tx:-106px!important;--ty:256px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(15):nth-last-child(10){display:block!important;--tx:-315px!important;--ty:226px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(16):nth-last-child(9){display:block!important;--tx:-513px!important;--ty:155px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(17):nth-last-child(8){display:block!important;--tx:-640px!important;--ty:0px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(18):nth-last-child(7){display:block!important;--tx:-512px!important;--ty:-156px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(19):nth-last-child(6){display:block!important;--tx:-314px!important;--ty:-227px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(20):nth-last-child(5){display:block!important;--tx:-104px!important;--ty:-257px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(21):nth-last-child(4){display:block!important;--tx:106px!important;--ty:-256px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(22):nth-last-child(3){display:block!important;--tx:315px!important;--ty:-226px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(23):nth-last-child(2){display:block!important;--tx:513px!important;--ty:-155px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(24):nth-last-child(1){display:block!important;--tx:640px!important;--ty:0px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(1):nth-last-child(26){display:block!important;--tx:390px!important;--ty:0px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(2):nth-last-child(25){display:block!important;--tx:288px!important;--ty:125px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(3):nth-last-child(24){display:block!important;--tx:126px!important;--ty:175px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(4):nth-last-child(23){display:block!important;--tx:-43px!important;--ty:184px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(5):nth-last-child(22){display:block!important;--tx:-210px!important;--ty:156px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(6):nth-last-child(21){display:block!important;--tx:-356px!important;--ty:75px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(7):nth-last-child(20){display:block!important;--tx:-356px!important;--ty:-76px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(8):nth-last-child(19){display:block!important;--tx:-209px!important;--ty:-156px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(9):nth-last-child(18){display:block!important;--tx:-42px!important;--ty:-184px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(10):nth-last-child(17){display:block!important;--tx:127px!important;--ty:-175px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(11):nth-last-child(16){display:block!important;--tx:288px!important;--ty:-125px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(12):nth-last-child(15){display:block!important;--tx:604px!important;--ty:92px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(13):nth-last-child(14){display:block!important;--tx:440px!important;--ty:204px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(14):nth-last-child(13){display:block!important;--tx:249px!important;--ty:258px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(15):nth-last-child(12){display:block!important;--tx:48px!important;--ty:279px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(16):nth-last-child(11){display:block!important;--tx:-151px!important;--ty:272px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(17):nth-last-child(10){display:block!important;--tx:-348px!important;--ty:235px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(18):nth-last-child(9){display:block!important;--tx:-530px!important;--ty:157px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(19):nth-last-child(8){display:block!important;--tx:-640px!important;--ty:-1px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(20):nth-last-child(7){display:block!important;--tx:-529px!important;--ty:-157px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(21):nth-last-child(6){display:block!important;--tx:-346px!important;--ty:-235px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(22):nth-last-child(5){display:block!important;--tx:-149px!important;--ty:-272px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(23):nth-last-child(4){display:block!important;--tx:50px!important;--ty:-279px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(24):nth-last-child(3){display:block!important;--tx:250px!important;--ty:-258px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(25):nth-last-child(2){display:block!important;--tx:441px!important;--ty:-203px!important}
 section.itt-ph .itt-ph-tiles>.itt-ph-tile:nth-child(26):nth-last-child(1){display:block!important;--tx:605px!important;--ty:-92px!important}
 section.itt-ph .itt-ph-stage{min-height:617px}
 section.itt-ph .itt-ph-stage:has(.itt-ph-tile:nth-child(26)){min-height:657px}
}
@media (min-width:1301px) and (max-width:1400px){
 section.itt-ph.is-in .itt-ph-tiles .itt-ph-tile{transform:translate(calc(-50% + var(--tx) * .9),calc(-50% + var(--ty))) scale(.88)}
}

/* BFSI industry page (postid-143) CTA 2 background, client image 2560x432 (2026-10-11) */
.postid-143 .pt-cta{background:linear-gradient(135deg,rgba(11,17,32,.93),rgba(12,74,110,.86)),url('https://ittraders.in/wp-content/uploads/2026/10/bfsi-banking-it-quote-cta.jpg') center/cover}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONES ONLY (≤767px): features photos as a home-page style overlap pair
   (client 2026-10-11) — rolled out to every service/industry page. Replaces the itt-mobile-slider swipe slider, which
   blurred any non-16:9 image. Big frame top-right shows the tall 920×2365
   photo panning top → bottom; the 900×620 photo sits bottom-left in a white
   card. Desktop/tablet untouched. Slider markup stays (hidden) as fallback.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .ittms{display:none!important}
  div.pt-features-media.pt-features-media--duo,
  div.pt-features-media.pt-features-media--duo.ittms-on{
    display:block!important;position:relative;height:auto;
    margin:0 0 1.75rem;padding:0 0 clamp(96px,30vw,150px)
  }
  .pt-features-media--duo .pt-media-main{
    width:84%;margin-left:auto;aspect-ratio:4/3;min-height:0;
    border-radius:18px;overflow:hidden
  }
  .pt-features-media--duo .pt-media-main img{
    object-fit:cover;object-position:50% 0;
    animation:ittMediaPan 16s ease-in-out 1s infinite alternate
  }
  .pt-features-media--duo .pt-media-sub{
    left:0;right:auto;bottom:0;width:64%;aspect-ratio:900/620;
    border:6px solid #fff;border-radius:18px
  }
}
@keyframes ittMediaPan{from{object-position:50% 0}to{object-position:50% 100%}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .pt-features-media--duo .pt-media-main img{animation:none}
}

/* Service + industry page hero sized to the client's banner artwork (2026-10-11):
   desktop 1920×724, phones 1080×1735 — the old 340px/280px floor cropped away over half of each image. */
@media (min-width:768px){
  body.single-itt_service .pt-hero,body.single-itt_industry .pt-hero{min-height:max(340px,calc(100vw * 724 / 1920))}
}
@media (max-width:767px){
  body.single-itt_service .pt-hero,body.single-itt_industry .pt-hero{min-height:calc(100vw * 1735 / 1080)}
}

/* IT Software pillar page (page-id-150) desktop hero sized to its 1600×718 banner, capped at 85vh (2026-10-11). */
@media (min-width:768px){
  .page-id-150 .pt-hero{min-height:max(446px,min(calc(100vw * 718 / 1600),85vh))}
}

/* IT Software pillar (page-id-150), phones: its photos are landscape (900×599 main, 900×404 sub), so there is nothing to pan —
   frame each at its own shape so the whole picture shows uncropped (2026-10-11). */
@media (max-width:767px){
  .page-id-150 .pt-features-media--duo .pt-media-main{aspect-ratio:900/599}
  .page-id-150 .pt-features-media--duo .pt-media-main img{animation:none;object-position:50% 50%}
  .page-id-150 .pt-features-media--duo .pt-media-sub{aspect-ratio:900/404}
  .page-id-150 div.pt-features-media.pt-features-media--duo{padding-bottom:clamp(56px,16vw,80px)}
}

/* Laptop & Desktop Rental (postid-705): its hero carries a 3-line title, long subtitle and 4 stats, which pushed it to
   724px desktop / 863px phone. Tighter type and spacing keep it a normal banner height (2026-10-11). */
.postid-705 .pt-hero h1{font-size:clamp(1.9rem,3.1vw,2.75rem);max-width:980px;margin-bottom:.7rem}
.postid-705 .pt-hero-subtitle{max-width:820px;margin-bottom:1.1rem}
.postid-705 .pt-hero-badge{margin-bottom:.8rem}
.postid-705 .pt-hero-stats{margin-top:1.1rem}
@media (max-width:767px){
  .postid-705 .pt-hero h1{font-size:1.75rem;line-height:1.18}
  .postid-705 .pt-hero-subtitle{font-size:.95rem;line-height:1.5}
}

/* IT Projects pillar (page-id-151): hero a little taller, per client (2026-10-11). */
.page-id-151 .pt-hero{min-height:460px}
@media (max-width:767px){.page-id-151 .pt-hero{min-height:420px}}

/* Header breathing room (2026-10-16, client): "About Us" touched the logo at 1025–1100px. Logo keeps a fixed gap;
   on small desktops the menu and the two pills tighten instead. Search is icon-only (itt-ai-search.php). */
@media (min-width:1025px){
  .navbar-logo{flex-shrink:0;margin-right:2rem}
}
@media (min-width:1025px) and (max-width:1199px){
  .navbar-menu{gap:.8rem}
  .navbar-menu .nav-link,.navbar-menu .dropdown-toggle{font-size:.875rem}
  .navbar-menu > a.nav-link[href^="tel:"],.navbar-actions > .btn.btn-sm{min-width:0;padding-left:1rem;padding-right:1rem}
  .navbar-actions{margin-left:.5rem}
}