/* ─────────────────────────────────────────────────────────
   Information Architecture — /products/information-architecture/
   Light-blue / teal accent (matches legacy .light-blue-color).
   ───────────────────────────────────────────────────────── */

/* Per-product accent — exact legacy value `light-blue-color` = #00F0FF (cyan).
   Scopes site-wide via body class. */
body.ld-tpl-information-architecture { --red: #00F0FF; }

/* Cyan accent is so bright that white text on it is unreadable — override every
   button / chip / submit that sits on the accent background to use black text. */
body.ld-tpl-information-architecture .iarch-btn--primary,
body.ld-tpl-information-architecture .ld-contact-form .hs-button,
body.ld-tpl-information-architecture .ld-contact-form input[type="submit"] {
  color: var(--black) !important;
}
/* Hover state — background flips to black, so text must flip back to white */
body.ld-tpl-information-architecture .iarch-btn--primary:hover,
body.ld-tpl-information-architecture .ld-contact-form .hs-button:hover,
body.ld-tpl-information-architecture .ld-contact-form input[type="submit"]:hover {
  color: var(--white) !important;
}
body.ld-tpl-information-architecture .iarch-cap-item:hover .iarch-cap-icon {
  color: var(--black);
}

.iarch-h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 14px; color: var(--black); text-transform: uppercase; }
.iarch-h2 em { font-style: normal; color: var(--red); font-weight: 900; }
.iarch-section-inner { max-width: 1200px; margin: 0 auto; }
.iarch-section-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.iarch-section-sub { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 auto; max-width: 680px; }

/* Buttons */
.iarch-btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-radius: 8px; transition: background 0.22s, color 0.22s, transform 0.22s, border-color 0.22s; }
.iarch-btn svg { width: 14px; height: 14px; transition: transform 0.22s; }
.iarch-btn:hover svg { transform: translateX(4px); }
.iarch-btn--primary { background: var(--red); color: var(--white); box-shadow: 0 12px 28px color-mix(in srgb, var(--red) 28%, transparent); }
.iarch-btn--primary:hover { background: var(--black); transform: translateY(-2px); }
.iarch-btn--ghost { background: transparent; color: inherit; border: 2px solid currentColor; }

/* ── HERO ──────────────────────────────────────────── */
.iarch-hero { position: relative; padding: 96px 48px; background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--red) 20%, transparent) 0%, transparent 45%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--red) 10%, transparent) 0%, transparent 50%), var(--black); color: var(--white); overflow: hidden; }
.iarch-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }
.iarch-hero-watermark { position: absolute; bottom: -36px; right: -24px; font-size: clamp(10rem, 26vw, 22rem); font-weight: 900; letter-spacing: -0.06em; color: rgba(255,255,255,0.04); pointer-events: none; white-space: nowrap; line-height: 1; }
.iarch-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.iarch-hero-text { min-width: 0; }
.iarch-hero-h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 24px; color: var(--white); text-transform: uppercase; }

/* Excerpt block (from WC) — sometimes contains <ul>/<p>. Normalise spacing. */
.iarch-hero-sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.88); margin: 0 0 24px; max-width: 560px; }
.iarch-hero-sub > *:last-child { margin-bottom: 0; }
.iarch-hero-sub p { margin: 0 0 8px; }
.iarch-hero-sub ul,
.iarch-hero-sub ol { list-style: none; padding: 0; margin: 0; }
.iarch-hero-sub li { position: relative; padding-left: 22px; margin: 0 0 6px; font-size: 18px; line-height: 1.45; color: rgba(255,255,255,0.88); }
.iarch-hero-sub li:last-child { margin-bottom: 0; }
.iarch-hero-sub li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--red); border-radius: 50%; }

.iarch-hero-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.iarch-hero .iarch-btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.4); }
.iarch-hero .iarch-btn--ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.iarch-hero-media { display: flex; justify-content: center; min-width: 0; }
.iarch-hero-thumb { width: 100%; max-width: 480px; height: auto; display: block; border-radius: 14px; box-shadow: 0 28px 70px rgba(0,0,0,0.45); }

/* ── CAPABILITIES GRID ─────────────────────────────── */
.iarch-cap { padding: 56px 48px 40px; background: var(--white); }
.iarch-cap-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.iarch-cap-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.iarch-cap-num { flex-shrink: 0; }
.iarch-cap-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  background: var(--white);
  box-shadow: 0 14px 32px rgba(0,0,0,0.06);
}

.iarch-cap-num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.iarch-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--red) 18%, transparent), color-mix(in srgb, var(--red) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  color: var(--red);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.iarch-cap-icon svg { width: 22px; height: 22px; }
.iarch-cap-item:hover .iarch-cap-icon {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  transform: scale(1.05);
}

.iarch-cap-text {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--black);
  letter-spacing: -0.005em;
}

/* ── DESCRIPTION ───────────────────────────────────── */
.iarch-desc { padding: 0 48px 96px; background: var(--white); }
.iarch-prose { max-width: 880px; margin: 0 auto; }
.iarch-prose p { font-size: 17px; line-height: 1.7; color: var(--black); margin: 0 0 18px; }
.iarch-prose p:last-child { margin-bottom: 0; }

/* ── MOBILE ────────────────────────────────────────── */
@media (max-width: 960px) {
  .iarch-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .iarch-cap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .iarch-hero { padding: 64px 24px; }
  .iarch-hero-watermark { display: none; }
  .iarch-cap, .iarch-desc { padding: 64px 24px; }
  .iarch-hero-actions { flex-direction: column; width: 100%; }
  .iarch-btn { width: 100%; justify-content: center; }
  .iarch-cap-item { gap: 12px; padding: 18px 18px; }
  .iarch-cap-text { font-size: 14.5px; }
}