/* ============================================================================
 * IA Authority — custom.css
 * Override layer on top of the vendor template styles.css.
 * Purpose: fit longer canonical-reference labels, neutralize template
 * placeholder imagery, and prepare slots for real assets (Phase B).
 * Loaded AFTER styles.css — do not edit styles.css directly.
 * ============================================================================ */

/* ---- Root tokens (IA Authority accent layer) -------------------------------- */
:root {
  --iaa-ink: #0a0a0a;
  --iaa-ink-2: #1a1a1a;
  --iaa-ink-3: #2a2a2a;
  --iaa-line: rgba(255, 255, 255, 0.08);
  --iaa-placeholder: linear-gradient(135deg, #0f1114 0%, #1b1e24 55%, #252a31 100%);
}

/* ---- Header pill: widen to fit canonical-reference labels ------------------- */
.tf-header.header2 .header-inner {
  max-width: 960px;
}

/* Keep logo crisp and bounded */
.tf-header .logo-site img,
.offcanvas-menu .canvas_head .logo-site img {
  max-height: 30px;
  width: auto;
  display: block;
}

/* ---- Hero: wire video correctly, neutralize placeholder background ---------
 * The template hardcodes `.section-hero .hero-image video { border-radius: 40px }`
 * which causes a corner mismatch at viewports where the container radius
 * shrinks (mobile 24px). The video's 40px corners fall inside the container's
 * 24px corners, leaving transparent gaps that expose the dark fallback
 * background. Fix: force the video to inherit the container radius and rely
 * on `overflow: hidden` to clip cleanly on any breakpoint. */
.section-hero .hero-image {
  background-image: none !important;
  background: #f5f6f8;
  overflow: hidden;
}
.section-hero .hero-image video,
.section-hero .hero-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit !important;
}
/* Paper wash overlay so the hero headline stays legible over the video rings.
 * Center is wash 62%, edges 90% — video remains visible everywhere but text
 * always has enough contrast even when rings cross it. */
.section-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background:
    radial-gradient(ellipse 85% 75% at center,
      rgba(245, 246, 248, 0.62) 0%,
      rgba(245, 246, 248, 0.75) 45%,
      rgba(245, 246, 248, 0.92) 100%),
    linear-gradient(180deg,
      rgba(245, 246, 248, 0.25) 0%,
      rgba(245, 246, 248, 0) 35%,
      rgba(245, 246, 248, 0) 70%,
      rgba(245, 246, 248, 0.35) 100%);
  pointer-events: none;
}
.section-hero .content-wrap {
  position: relative;
  z-index: 2;
}
/* Sync hero-image inset with section-hero padding per breakpoint.
 * Template uses inset: 16px 16px 0 16px hardcoded — on viewports where the
 * section padding shrinks, a visible gap appears between the section edge
 * and the hero-image. Sync them. */
@media (max-width: 767px) {
  .section-hero,
  .section-hero.v1,
  .section-hero.v2 {
    padding: 12px 12px 0 !important;
  }
  .section-hero .hero-image {
    inset: 12px 12px 0 12px;
    border-radius: 24px;
  }
  .section-hero .hero-image::after {
    border-radius: 24px;
    background:
      radial-gradient(ellipse 100% 80% at center,
        rgba(245, 246, 248, 0.70) 0%,
        rgba(245, 246, 248, 0.85) 100%);
  }
  .section-hero .scroll-more {
    border-radius: 24px 24px 0 0;
  }
}
@media (max-width: 575px) {
  .section-hero,
  .section-hero.v1,
  .section-hero.v2 {
    padding: 10px 10px 0 !important;
  }
  .section-hero .hero-image {
    inset: 10px 10px 0 10px;
    border-radius: 20px;
  }
  .section-hero .hero-image::after {
    border-radius: 20px;
  }
  .section-hero .scroll-more {
    border-radius: 20px 20px 0 0;
  }
}

/* Hide the three floating placeholder rectangles next to the hero title.
 * The title now reads cleanly without the vendor decoration; a real mark will
 * come in Phase B. */
.section-hero .content-wrap .title-icon {
  display: none;
}

/* ---- Partner strip: hide until real ecosystem wordmarks are generated ------- */
.section-partner {
  display: none;
}

/* ---- About section: neutralize "earth" placeholder + fix layout ------------
 * Template layout: col-left flex column space-between, expects content at top
 * and an earth.png at bottom. Hiding the img leaves content stuck at top and
 * a big empty dark space below. Solution: center the content vertically,
 * match the template border-radius (40px) and restore the subtle inset
 * accents so the slab has the same surface treatment as the right cards. */
.section-about-us .col-left > img {
  display: none;
}
.section-about-us .col-left {
  background:
    radial-gradient(62% 62% at 28% -10%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #15181d 0%, #0c0d10 100%);
  border-radius: 40px;
  min-height: 420px;
  padding: 64px 40px;
  justify-content: center !important;
  box-shadow:
    0 3px 24px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -8px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  position: relative;
}
/* Subtle typographic watermark at the bottom of the slab (takes the place
 * of the missing globe). Pure CSS, zero external asset. */
.section-about-us .col-left::after {
  content: "IA AUTHORITY";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
/* About-section dark slab button: invert to light-outline pill.
 * The template .tf-btn is dark/dark which disappears on the slab. */
.section-about-us .col-left .tf-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.section-about-us .col-left .tf-btn:hover {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

/* ---- About section: quote card fixes --------------------------------------- */
/* Template's box-quotes is a 2-column flex (160×250 image left + content right).
 * The image slot was quotes-1.jpg which is a solid blue placeholder. Hiding
 * the image lets the quote content take the full card width — cleaner than
 * showing a dark empty rectangle inside a light card. */
.section-about-us .box-quotes .image {
  display: none !important;
}
.section-about-us .box-quotes {
  padding: 32px 36px;
}
.section-about-us .box-quotes .content {
  margin-top: 0;
  width: 100%;
}
/* Enlarge the built-in quote-mark SVG that the template ships with */
.section-about-us .box-quotes .content .icon svg {
  width: 32px;
  height: 28px;
}

/* ---- About review-box counter: proper label sizing ------------------------- */
/* The counter is 144px font-size. Without a smaller label class, " terms"
 * next to the number wraps at the same size producing an awkward 2-line
 * stack. Reduce "terms" to a fraction of the number size so it sits as a
 * proper typographic label next to the big number. */
.section-about-us .review-box .counter {
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.section-about-us .review-box .counter > span:not(.number) {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.55;
  text-transform: lowercase;
}
@media (max-width: 1199px) {
  .section-about-us .review-box .counter > span:not(.number) {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .section-about-us .review-box .counter > span:not(.number) {
    font-size: 18px;
  }
}

/* ---- Featured Terms (home): kill placeholder JPGs, replace with dark slabs -- */
.section-featured-works .featured-works-item .image img[src*="featured-works"] {
  opacity: 0;
}
.section-featured-works .featured-works-item .image {
  background: var(--iaa-placeholder);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--iaa-line);
}

/* ---- Services accordion side image (home): neutralize ---------------------- */
.services-image img {
  display: none;
}
.services-image {
  background: var(--iaa-placeholder);
  border-radius: 32px;
  min-height: 420px;
  box-shadow: inset 0 1px 0 var(--iaa-line);
}

/* ---- Quote boxes: neutralize placeholder background image ------------------ */
.box-quotes .image img {
  opacity: 0;
}
.box-quotes .image {
  background: var(--iaa-placeholder);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--iaa-line);
}

/* ---- Testimonials swiper: neutralize right-side photo ---------------------- */
.sw-main-image .swiper-slide .testimonial-image img {
  opacity: 0;
}
.sw-main-image .swiper-slide .testimonial-image {
  background: var(--iaa-placeholder);
  border-radius: 32px;
  min-height: 360px;
  box-shadow: inset 0 1px 0 var(--iaa-line);
}

/* ---- Contact section: neutralize full-bleed background --------------------- */
.section-contact .contact-image img {
  display: none;
}
.section-contact .contact-image {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 60%, #111111 100%);
}

/* ---- Team slots repurposed as clusters: hide placeholder faces ------------- */
.section-team .team-item .image img,
.section-team .team-item .top .image img {
  opacity: 0;
}
.section-team .team-item .image,
.section-team .team-item .top .image {
  background: var(--iaa-placeholder);
  box-shadow: inset 0 1px 0 var(--iaa-line);
}
.section-team .team-item.style-1 .top .image {
  border-radius: 20px;
}

/* ---- Benefits boxes: hide placeholder decorative SVGs ---------------------- */
.benefits-design-inner img,
.benefits-secure-inner img {
  display: none;
}

/* ---- Tools section floating items: hide placeholder decoratives ------------ */
.section-tools > img[src*="item-"] {
  display: none;
}

/* ---- Awards / Ecosystem cards: hide placeholder logos, show typographic slab */
.section-awards .awards-item .image img {
  display: none;
}
.section-awards .awards-item .image {
  background: var(--iaa-placeholder);
  border-radius: 14px;
  min-width: 84px;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 var(--iaa-line);
}

/* ---- Light-top / light-bot decorative placeholders in dark sections -------- */
.box-black > img[src*="light-"] {
  display: none;
}

/* ---- Blog thumbnails: neutralize placeholder JPGs -------------------------- */
.blog-item .image img,
.blog-grid-item .image img {
  opacity: 0;
}
.blog-item .image,
.blog-grid-item .image {
  background: var(--iaa-placeholder);
  box-shadow: inset 0 1px 0 var(--iaa-line);
}

/* ---- Work-single gallery placeholders -------------------------------------- */
.section-work-single .image img[src*="work-single"] {
  opacity: 0;
}

/* ---- Mobile menu tweaks ---------------------------------------------------- */
.offcanvas-menu .canvas_head .logo-site img {
  max-width: 140px;
}

/* ---- Link-underline contrast on dark sections ------------------------------ */
.box-black a,
footer a {
  transition: opacity 0.2s ease;
}
.box-black a:hover,
footer a:hover {
  opacity: 0.8;
}

/* ---- Smooth anchor scroll for in-page navigation --------------------------- */
html {
  scroll-behavior: smooth;
}

/* ---- Article typography bumps for pillar / essay / glossary pages ---------- */
article h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
article p {
  font-size: 1.0625rem;
  line-height: 1.78;
}
article p.lead {
  font-size: 1.25rem;
  line-height: 1.65;
  letter-spacing: -0.005em;
}
article blockquote {
  border-left: 3px solid #FD3A25;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  font-size: 1.15rem;
  font-weight: 500;
  background: rgba(253, 58, 37, 0.03);
  border-radius: 0 8px 8px 0;
}
article code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

/* ============================================================================
 * RESPONSIVE — 100% responsive is non-negotiable. Breakpoints mirror Bootstrap 5
 * and the template's native media queries (1440 / 1199 / 991 / 767 / 575).
 * ============================================================================ */

/* ---- Header pill width per breakpoint -------------------------------------- */
@media (min-width: 1440px) {
  .tf-header.header2 .header-inner {
    max-width: 960px;
  }
}
@media (max-width: 1199px) {
  .tf-header.header2 .header-inner {
    max-width: 880px;
    padding: 8px 8px 8px 24px;
  }
  .nav-menu-main {
    gap: 18px;
  }
}
@media (max-width: 991px) {
  .tf-header.header2 .header-inner {
    max-width: unset !important;
    margin: 0 20px;
  }
}
@media (max-width: 575px) {
  .tf-header {
    padding-top: 24px;
  }
  .tf-header.header2 .header-inner {
    margin: 0 12px;
    padding: 8px 8px 8px 16px;
  }
  .tf-header .logo-site img {
    max-height: 22px;
  }
}

/* ---- Hero typography clamp --------------------------------------------------
 * The template's .text-display-2 size is static on desktop. Clamp it across
 * viewports so the headline stays readable on iPhone SE (320px) up to 4K. */
.section-hero .content-wrap .title .title1,
.section-hero .content-wrap .title .title2 span {
  font-size: clamp(2.25rem, 6vw, 4.75rem) !important;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.section-hero .content-wrap .text {
  font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
  line-height: 1.7;
  padding: 0 16px;
}
.section-hero .content-wrap .sub {
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
}

/* ---- Hero responsive padding + CTA stacking -------------------------------- */
@media (max-width: 991px) {
  .section-hero .content-wrap {
    padding: 140px 16px 96px;
  }
  .section-hero.v1 .content-wrap {
    padding: 140px 16px 48px;
  }
}
@media (max-width: 767px) {
  .section-hero .content-wrap {
    padding: 120px 12px 80px;
  }
  .section-hero.v1 .content-wrap {
    padding: 120px 12px 40px;
  }
  .section-hero .content-wrap .bot-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .section-hero .content-wrap .bot-btns .tf-btn,
  .section-hero .content-wrap .bot-btns .tf-btn-2 {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
@media (max-width: 575px) {
  /* .section-hero padding + .hero-image inset handled in the hero block above */
  .section-hero .content-wrap {
    padding: 104px 4px 64px;
  }
  .section-hero .scroll-more {
    width: 88%;
    max-width: 280px;
    font-size: 0.8125rem;
  }
}

/* ---- Section headings responsive typography -------------------------------- */
.heading-section .heading-title {
  font-size: clamp(1.75rem, 4vw, 3.25rem) !important;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.heading-section .heading-sub {
  font-size: clamp(0.75rem, 0.95vw, 0.875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Container paddings per viewport --------------------------------------- */
@media (max-width: 991px) {
  .flat-spacing {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 575px) {
  .flat-spacing {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- Grid cards: ensure consistent aspect ratios on placeholder slabs ------ */
.section-featured-works .featured-works-item .image,
.services-image,
.box-quotes .image,
.sw-main-image .swiper-slide .testimonial-image,
.section-team .team-item .image,
.section-team .team-item .top .image {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.section-team .team-item.style-1 .top .image,
.section-awards .awards-item .image {
  aspect-ratio: 1 / 1;
}

/* ---- Cards stack on mobile, no overflow ------------------------------------ */
@media (max-width: 991px) {
  .featured-works-list {
    gap: 24px;
  }
  .featured-works-item {
    width: 100%;
  }
  .pricing-item,
  .features-item.style-2 {
    padding: 28px 24px;
  }
}
@media (max-width: 575px) {
  .pricing-item .heading .price-number {
    font-size: 2.75rem !important;
  }
  .accordion-faq_item .accordion-title {
    font-size: 1.25rem;
  }
  .awards-item {
    flex-wrap: wrap;
  }
  .awards-item .year {
    width: 100%;
    padding-top: 4px;
  }
}

/* ---- Article pages: readable line length and padding ---------------------- */
article {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 767px) {
  article p,
  article p.lead {
    font-size: 1rem;
    line-height: 1.72;
  }
  article h2 {
    font-size: 1.35rem;
    margin-top: 2rem !important;
  }
  article blockquote {
    padding: 0.875rem 1.25rem;
    font-size: 1.05rem;
    margin: 1.5rem 0;
  }
  article ul,
  article ol {
    padding-left: 1.25rem;
  }
}

/* ---- Footer responsive ----------------------------------------------------- */
@media (max-width: 767px) {
  footer .footer-content {
    text-align: center;
    padding: 40px 16px;
  }
  footer .tf-social-1 {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
    text-align: center;
  }
  .footer-bottom .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px !important;
  }
}

/* ---- Contact section responsive ------------------------------------------- */
@media (max-width: 991px) {
  .section-contact {
    padding: 48px 24px !important;
    border-radius: 32px;
  }
  .section-contact .contact-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Awards/Ecosystem rows stack on small screens ------------------------- */
@media (max-width: 767px) {
  .section-awards .awards-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 16px;
  }
  .section-awards .awards-item .image {
    min-width: 64px;
    min-height: 64px;
  }
}

/* ---- Buttons tap target minimum 44px --------------------------------------- */
.tf-btn,
.tf-btn-2,
button,
.btn {
  min-height: 44px;
}

/* ---- Mobile menu offcanvas: better tap targets ----------------------------- */
@media (max-width: 767px) {
  .offcanvas-menu .nav-ul-mb li .mb-menu-link {
    font-size: 1.75rem !important;
    padding: 12px 0;
  }
  .offcanvas-menu .canvas_foot .right {
    gap: 20px;
  }
}

/* ---- Prevent horizontal scroll on any viewport ----------------------------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
main, section, footer, header {
  max-width: 100%;
}
img, video, svg {
  max-width: 100%;
  height: auto;
}

/* ---- Safe area insets for iOS notch ---------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
  .tf-header {
    padding-top: calc(24px + env(safe-area-inset-top));
  }
  @media (min-width: 992px) {
    .tf-header {
      padding-top: calc(48px + env(safe-area-inset-top));
    }
  }
  footer .container {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- Reduce motion for accessibility ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .section-hero .hero-image video {
    display: none;
  }
  .section-hero .hero-image {
    background-image: url(../images/video/hero-poster.jpg);
    background-size: cover;
    background-position: center;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}