/* ===========================================================================
   DIGIMARKETMOZ — INNER PAGE COMPONENTS
   Extends assets/hyperai-reference-v3.css with the components the homepage
   never needed: page banners, long-form article layout, sidebars, case
   grids, the work gallery, the contact form and the AI assistant panel.
   Tokens, type scale, radii and breakpoints all come from the v3 sheet.
   =========================================================================== */

/* ---------- shared page banner ------------------------------------------ */

.page-hero { padding-top: 20px; }

.page-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 72px 64px 66px;
  color: #fff;
  background: linear-gradient(120deg, #6758f6 0%, #7f75ff 33%, #c378f4 68%, #ee8fdf 100%);
  box-shadow: 0 30px 80px rgba(80, 53, 185, .15);
}
/* Scrim between the photo and the copy. The banner gradient runs from deep
   indigo to a pale pink, so white text needs a dark backing that holds at
   every width, not only where the gradient happens to be dark. */
.page-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(28, 18, 86, .58) 0%, rgba(28, 18, 86, .34) 42%, rgba(28, 18, 86, .06) 72%, transparent 88%);
  pointer-events: none;
}
.page-hero-card.with-photo { padding-right: 46%; }

.page-hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 26%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%);
}
.page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.02);
  mix-blend-mode: luminosity;
  opacity: .5;
  animation: kenburns 16s ease-in-out infinite alternate;
}

.page-hero-inner { position: relative; z-index: 3; max-width: 760px; }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.crumb a { color: rgba(255, 255, 255, .8); transition: color .2s; }
.crumb a:hover { color: #fff; }
.crumb span { opacity: .55; }
.crumb em { font-style: normal; }

.page-hero-card h1 {
  font: 800 clamp(36px, 4.4vw, 60px)/1.03 Manrope, sans-serif;
  letter-spacing: -.05em;
  margin: 0 0 26px;
  text-wrap: balance;
}

.quick {
  position: relative;
  max-width: 620px;
  padding: 20px 22px 20px 26px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(14px);
}
.quick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: #fff;
  opacity: .85;
}
.quick > span {
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 8px;
}
.quick p { margin: 0; font-size: 12.5px; line-height: 1.72; color: rgba(255, 255, 255, .93); }

.page-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.page-hero-proof {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.page-hero-proof div { display: flex; flex-direction: column; }
.page-hero-proof strong { font: 800 24px Manrope, sans-serif; }
.page-hero-proof span { font-size: 9px; color: rgba(255, 255, 255, .72); margin-top: 3px; }

/* ---------- extra buttons ----------------------------------------------- */

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid #ddd5e8;
}
.btn-outline:hover { border-color: #7c39ef; color: #7c39ef; }
.btn-ghost {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: #fff; color: #6b2fe0; }
.btn-wa { background: #1fab54; color: #fff; }
.btn-wa:hover { box-shadow: 0 14px 28px rgba(31, 171, 84, .28); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 11px; }
.btn.full { display: flex; width: 100%; }
button.btn { border: 0; cursor: pointer; }
button.btn-outline { border: 1px solid #ddd5e8; }

/* ---------- navigation active states -------------------------------------
   The base sheet underlines .desktop-nav > a.active but has no rule for the
   Services dropdown, which is the active item on all eight service pages. */

.nav-drop > button.active::after { right: 0; }
.drop-menu a.active { background: #f7f3ff; color: var(--purple); font-weight: 700; }

/* ---------- section heads ----------------------------------------------- */

.sec-head { max-width: 720px; margin-bottom: 38px; }
.sec-head h2 { font: 800 clamp(32px, 3.6vw, 48px)/1.06 Manrope, sans-serif; letter-spacing: -.045em; margin: 0 0 14px; }
.sec-head p { font-size: 13px; line-height: 1.75; color: var(--muted); margin: 0; }

/* ---------- long-form article ------------------------------------------- */

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr);
  gap: 68px;
  align-items: start;
}

.prose { min-width: 0; }
.prose > h2 {
  position: relative;
  font: 800 clamp(25px, 2.6vw, 34px)/1.15 Manrope, sans-serif;
  letter-spacing: -.035em;
  margin: 52px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose > h2::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7a39eb, #a94eff);
}
.prose > h2:first-child::after { display: none; }
.prose h3 {
  font: 800 16px/1.35 Manrope, sans-serif;
  letter-spacing: -.02em;
  margin: 28px 0 8px;
  color: #2a2632;
}
.prose p { font-size: 13.5px; line-height: 1.82; color: var(--muted); margin: 0 0 15px; }
.prose strong { color: var(--ink); }
.prose a:not(.btn) { color: #7c39ef; font-weight: 700; border-bottom: 1px solid rgba(124, 57, 239, .3); }
.prose a:not(.btn):hover { border-bottom-color: #7c39ef; }

ul.tick { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 11px; }
ul.tick li {
  position: relative;
  padding-left: 30px;
  font-size: 13px;
  line-height: 1.68;
  color: #4c4854;
}
ul.tick li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #7938ec;
  background: #f1e8ff;
}

/* inline work strip inside an article */
.work-inline { margin: 26px 0 34px; }
.work-cap { font-size: 10px; color: #8b8792; margin: 12px 0 0; }

/* ---------- sidebar ------------------------------------------------------ */

.side { position: sticky; top: 96px; display: grid; gap: 14px; }
.side-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 24px 22px;
  box-shadow: 0 10px 32px rgba(54, 39, 85, .05);
}
.side-card h4 { font: 800 14px Manrope, sans-serif; margin: 0 0 9px; letter-spacing: -.02em; }
.side-card p { font-size: 11.5px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.side-card.alt {
  background: linear-gradient(155deg, #8e42f5, #6730d9);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 20px 45px rgba(100, 46, 215, .22);
}
.side-card.alt h4 { color: #fff; }

.wa-link { display: inline-block; margin-top: 12px; font-size: 10px; font-weight: 800; color: #7c39ef; }
.side-card.alt .wa-link { color: #fff; opacity: .88; }
.wa-link:hover { text-decoration: underline; }

.mini-stats { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mini-stats li { display: flex; align-items: baseline; gap: 10px; }
.mini-stats b { font: 800 21px Manrope, sans-serif; min-width: 74px; }
.mini-stats span { font-size: 10px; opacity: .8; }
.side-card:not(.alt) .mini-stats b { color: #7c39ef; }
.side-card:not(.alt) .mini-stats span { color: var(--muted); }

/* ---------- FAQ on inner pages ------------------------------------------ */

.faq-narrow { max-width: 820px; margin-inline: auto; }
.faq-narrow .accordion { margin-top: 26px; }

/* ---------- related services -------------------------------------------- */

.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.rel-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 24px 22px;
  border: 1px solid #ece7f1;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(54, 39, 85, .04);
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.rel-card:hover { box-shadow: 0 22px 48px rgba(60, 39, 105, .12); border-color: #d9cdf1; transform: translateY(-3px); }
.svc-tag {
  align-self: flex-start;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7938ec;
  background: #f1e8ff;
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 16px;
}
.rel-card h3 { font: 800 15px Manrope, sans-serif; margin: 0 0 9px; letter-spacing: -.02em; }
.rel-card p { font-size: 10.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---------- CTA band ----------------------------------------------------- */

.cta-band { padding-bottom: 96px; }
.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 52px 56px;
  color: #fff;
  background: linear-gradient(135deg, #2a1160 0%, #5b2bc6 48%, #8b3fe8 100%);
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 28px 70px rgba(64, 30, 150, .22);
}
.cta-card h2 { font: 800 clamp(28px, 3vw, 40px)/1.1 Manrope, sans-serif; letter-spacing: -.04em; margin: 0 0 12px; text-wrap: balance; }
.cta-card p { font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .8); margin: 0; max-width: 520px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 2; }
.cta-card > div { position: relative; z-index: 2; }
.cta-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  background: radial-gradient(circle, #c579ff, transparent 68%);
  right: -80px;
  top: -140px;
}

/* ---------- case studies ------------------------------------------------- */

.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.case {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 30px 28px;
  box-shadow: 0 10px 32px rgba(54, 39, 85, .05);
  transition: box-shadow .3s, border-color .3s;
}
.case:hover { box-shadow: 0 24px 52px rgba(60, 39, 105, .11); border-color: #ded3f2; }
.case-sector {
  align-self: flex-start;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7938ec;
  background: #f1e8ff;
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 14px;
}
.case h3 { font: 800 19px Manrope, sans-serif; margin: 0 0 8px; letter-spacing: -.03em; }
.case-hook {
  font: 700 13px/1.5 Manrope, sans-serif;
  color: #7c39ef;
  margin-bottom: 12px;
}
.case p { font-size: 12px; line-height: 1.75; color: var(--muted); margin: 0; }
.case-top { flex: 1; display: flex; flex-direction: column; }
.case-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.case-stats .stat { text-align: left; }
.case-stats b { display: block; font: 800 19px Manrope, sans-serif; color: var(--ink); }
.case-stats span { display: block; font-size: 8.5px; color: #85818d; margin-top: 4px; line-height: 1.4; }
.fx-note { font-size: 10px; color: #8b8792; margin: 22px 0 0; }

/* ---------- process steps ------------------------------------------------ */

.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.proc-step {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 26px 22px;
  box-shadow: 0 10px 32px rgba(54, 39, 85, .04);
}
.proc-n { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; color: #7938ec; margin-bottom: 20px; }
.proc-step h3 { font: 800 15px Manrope, sans-serif; margin: 0 0 8px; letter-spacing: -.02em; }
.proc-step p { font-size: 10.5px; line-height: 1.68; color: var(--muted); margin: 0; }

/* ---------- work gallery ------------------------------------------------- */

.media-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.mf {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 30px;
  padding: 9px 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #6d6877;
  cursor: pointer;
  transition: .25s;
}
.mf:hover { border-color: #d9cdf1; color: #7c39ef; }
.mf.on { background: linear-gradient(135deg, #8a3ff3, #6b2fe0); border-color: transparent; color: #fff; }

.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.work-grid[data-limit="4"] { grid-template-columns: repeat(4, 1fr); }

.wk {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.wk:hover { box-shadow: 0 22px 48px rgba(60, 39, 105, .13); border-color: #d9cdf1; transform: translateY(-3px); }
.wk-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #f4f1f8; }
.wk-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.wk:hover .wk-media img { transform: scale(1.06); }
.wk-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  color: #7c39ef;
  font-size: 13px;
  box-shadow: 0 12px 26px rgba(40, 20, 80, .22);
}
.wk-meta { display: block; padding: 14px 16px 16px; }
.wk-meta b { display: block; font: 800 12px Manrope, sans-serif; letter-spacing: -.02em; }
.wk-meta i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #8b8792; margin-top: 5px; }
.wk-noposter { display: grid; place-items: center; height: 100%; background: linear-gradient(145deg, #f5f1fc, #eee7fb); }
.wk-noposter span { font: 800 12px Manrope, sans-serif; color: #8a7fb0; padding: 0 14px; text-align: center; }
.wk-empty { border-style: dashed; }
.wk-ph { display: grid; place-items: center; aspect-ratio: 4 / 5; background: linear-gradient(145deg, #f7f4fc, #f1ecfa); }
.wk-ph-ico { font-size: 22px; color: #b3a6d6; }

/* ---------- lightbox ----------------------------------------------------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  padding: 40px 20px;
  background: rgba(10, 7, 20, .88);
  backdrop-filter: blur(10px);
}
.lb.open { display: grid; }
.lb-fig { margin: 0; max-width: 1000px; width: 100%; }
.lb-fig > div { border-radius: 16px; overflow: hidden; background: #100c1c; }
.lb-fig img { width: 100%; max-height: 74vh; object-fit: contain; display: block; }
.lb-frame { position: relative; padding-top: 56.25%; }
.lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb-fig figcaption { color: #fff; padding-top: 16px; }
.lb-fig figcaption b { font: 800 15px Manrope, sans-serif; }
.lb-fig figcaption i { display: block; font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #b79dff; margin: 5px 0 8px; }
.lb-fig figcaption span { font-size: 11.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.lb-x, .lb-nav {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: .25s;
}
.lb-x:hover, .lb-nav:hover { background: #fff; color: #2a1160; }
.lb-x { top: 22px; right: 22px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }

/* ---------- contact ------------------------------------------------------ */

.lead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; }
.lead h2 { font: 800 clamp(30px, 3.4vw, 44px)/1.08 Manrope, sans-serif; letter-spacing: -.045em; margin: 0; }
.lead > div > p { font-size: 13.5px; line-height: 1.8; color: var(--muted); }

.contact-direct { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.contact-direct h4 { font: 800 14px Manrope, sans-serif; margin: 0 0 14px; }

.form-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 32px 30px;
  box-shadow: 0 20px 55px rgba(54, 39, 85, .08);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; display: flex; flex-direction: column; }
.field label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6f6a79;
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  font: 400 13px 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 13px;
  width: 100%;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-color: #b691f5;
  box-shadow: 0 0 0 3px rgba(124, 57, 239, .12);
}
.form-note { font-size: 10px; color: #8b8792; text-align: center; margin: 12px 0 0; }

/* ---------- AI assistant ------------------------------------------------- */

.agent-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 30px;
  padding: 13px 20px;
  cursor: pointer;
  font: 800 11px Manrope, sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #8a3ff3, #6b2fe0);
  box-shadow: 0 18px 40px rgba(108, 47, 224, .35);
  transition: transform .25s, box-shadow .25s;
}
.agent-fab:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(108, 47, 224, .45); }
.agent-fab .pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #43e0a8;
  box-shadow: 0 0 0 0 rgba(67, 224, 168, .7);
  animation: pulse 1.7s infinite;
}

.agent-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9991;
  width: min(390px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 44px));
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e8e3ef;
  box-shadow: 0 30px 80px rgba(38, 22, 78, .26);
}
.agent-panel.open { display: flex; }
.agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(135deg, #7c39ef, #5b2bc6);
}
.agent-head strong { display: block; font: 800 13px Manrope, sans-serif; }
.agent-head small { display: block; font-size: 8px; letter-spacing: .12em; color: rgba(255, 255, 255, .72); margin-top: 3px; }
.agent-x { border: 0; background: rgba(255, 255, 255, .18); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; cursor: pointer; }
.agent-x:hover { background: rgba(255, 255, 255, .32); }
.agent-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--soft); }
.agent-body .msg { max-width: 84%; font-size: 12px; line-height: 1.65; padding: 11px 14px; border-radius: 13px; }
.agent-body .msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.agent-body .msg.me { background: linear-gradient(135deg, #8a3ff3, #6b2fe0); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.agent-opts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; background: var(--soft); }
.agent-opts .opt, .agent-opts button {
  border: 1px solid #ddd2f0;
  background: #fff;
  color: #6b3ad0;
  border-radius: 30px;
  padding: 8px 13px;
  font: 700 11px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: .2s;
}
.agent-opts .opt:hover, .agent-opts button:hover { background: #7c39ef; border-color: #7c39ef; color: #fff; }
.agent-input { display: none; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.agent-input input {
  flex: 1;
  font: 400 13px 'DM Sans', sans-serif;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 9px;
  padding: 11px 13px;
}
.agent-input input:focus { outline: none; border-color: #b691f5; background: #fff; }
.agent-input button {
  width: 42px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(135deg, #8a3ff3, #6b2fe0);
}
.agent-input.show { display: flex; }
.agent-body .msg.typing { display: flex; gap: 5px; align-items: center; }
.agent-body .msg.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #b3a6d6; animation: agentBob 1.2s infinite;
}
.agent-body .msg.typing i:nth-child(2) { animation-delay: .15s; }
.agent-body .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes agentBob { 50% { transform: translateY(-5px); opacity: .55; } }
.wk-failed .wk-media {
  background: repeating-linear-gradient(45deg, #f7f5fb, #f7f5fb 10px, #efeaf7 10px, #efeaf7 20px);
}
.wk-failed .wk-media img { display: none; }
.wk-failed .wk-media::after {
  content: "Link not public 4 set Drive sharing to CAnyone with the linkD";
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 18px; text-align: center; font-size: 9.5px; line-height: 1.6; color: #8a7fb0;
}
.agent-foot { padding: 9px 14px; font-size: 9px; text-align: center; color: #8b8792; background: #fff; border-top: 1px solid var(--line); }

/* ---------- large screens ------------------------------------------------ */

@media (min-width: 1500px) {
  .page-hero-card { padding: 88px 78px 80px; }
  .page-hero-card h1 { font-size: clamp(52px, 3.8vw, 70px); }
  .quick p { font-size: 14px; }
  .prose-grid { gap: clamp(70px, 6vw, 110px); }
  .prose p { font-size: 14.5px; }
  ul.tick li { font-size: 14px; }
  .cta-card { padding: 62px 68px; }
}

/* ---------- tablets ------------------------------------------------------ */

@media (max-width: 1050px) {
  .page-hero-card.with-photo { padding-right: 38%; }
  .page-hero-photo { width: 44%; opacity: .8; }
  .prose-grid { grid-template-columns: 1fr; gap: 46px; }
  .side { position: static; grid-template-columns: 1fr 1fr; display: grid; gap: 14px; }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .proc { grid-template-columns: repeat(2, 1fr); }
  .work-grid, .work-grid[data-limit="4"] { grid-template-columns: repeat(3, 1fr); }
  .lead { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 820px) {
  /* The photo goes full-bleed and faint here, so the scrim needs a floor
     across the whole card: the gradient's right end is pale pink and white
     headings lose contrast against it. */
  .page-hero-card::after {
    background: linear-gradient(158deg, rgba(26, 16, 82, .52) 0%, rgba(26, 16, 82, .4) 52%, rgba(26, 16, 82, .34) 100%);
  }
  .page-hero-card { padding: 52px 38px 48px; }
  .page-hero-card.with-photo { padding-right: 38px; }
  .page-hero-photo { width: 100%; opacity: .22; mask-image: none; -webkit-mask-image: none; }
  .cases { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; padding: 42px 34px; }
  .cta-actions { justify-content: flex-start; }
  .work-grid, .work-grid[data-limit="4"] { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding-bottom: 78px; }
}

@media (max-width: 580px) {
  .page-hero { padding-top: 8px; }
  .page-hero-card { padding: 38px 22px 34px; border-radius: 18px; }
  .page-hero-card.with-photo { padding-right: 22px; }
  .page-hero-card h1 { font-size: 34px; }
  .quick { padding: 17px 17px 17px 20px; }
  .quick p { font-size: 12px; }
  .page-hero-proof { gap: 22px; }
  .prose > h2 { font-size: 24px; }
  .side { grid-template-columns: 1fr; }
  .rel-grid, .proc { grid-template-columns: 1fr; }
  .case-stats { grid-template-columns: 1fr 1fr; gap: 16px 1px; }
  .cta-card { padding: 34px 22px; border-radius: 18px; }
  .cta-actions .btn { width: 100%; }
  .form-card { padding: 24px 18px; border-radius: 16px; }
  .pair { grid-template-columns: 1fr; gap: 0; }
  .work-grid, .work-grid[data-limit="4"] { grid-template-columns: 1fr 1fr; gap: 10px; }
  .agent-fab { right: 14px; bottom: 14px; padding: 11px 16px; font-size: 10px; }
  .agent-panel { right: 8px; bottom: 8px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .cta-band { padding-bottom: 65px; }
}

/* ---------- reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .page-hero-photo img { animation: none; }
  .agent-fab .pulse { animation: none; }
  .wk-media img { transition: none; }
}

/* ---------- homepage additions ------------------------------------------ */

.hero-note {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
  margin: 22px 0 0;
}

.local-block-head { position: relative; z-index: 1; margin-top: 54px; }
.local-block-head h2,
.local-gets h3,
.local-closer h2 {
  font: 800 clamp(30px, 3.2vw, 44px)/1.06 Manrope, sans-serif;
  letter-spacing: -.04em;
  margin: 0;
  text-wrap: balance;
}
.local-gets h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 18px; }
.local-subhead { margin-top: 34px !important; }

.local-gets { position: relative; z-index: 1; }
.local-gets ul.tick { margin: 0; }

.local-closer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  margin-top: 54px;
  padding-top: 44px;
  border-top: 1px solid #eee8f7;
}
.local-closer p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: 620px;
}
.local-closer a { color: #7c39ef; font-weight: 700; }

@media (max-width: 820px) {
  .local-closer { grid-template-columns: 1fr; gap: 24px; margin-top: 42px; padding-top: 34px; }
  .local-closer .btn { justify-self: start; }
  .local-block-head { margin-top: 42px; }
}

/* ---------- footer legibility --------------------------------------------
   The base sheet sets footer links to 9px and the legal line to 8px. The
   footer now carries a real descriptive paragraph and the full service index
   on every page, so it is raised to a readable size. Layout is unchanged. */

.footer-top h4 { font-size: 12px; margin-bottom: 14px; }
.footer-top a,
.footer-top p { font-size: 12px; line-height: 1.7; margin-bottom: 8px; }
.footer-brand p { color: rgba(255, 255, 255, .82); max-width: 46ch; }
.footer-top a { color: rgba(255, 255, 255, .8); }
.footer-cta { font-size: 11px; padding: 11px 15px !important; }
.footer-bottom { font-size: 10.5px; color: rgba(255, 255, 255, .72); }

@media (min-width: 1500px) {
  .footer-top h4 { font-size: 13px; }
  .footer-top a, .footer-top p { font-size: 13px; }
}

@media (max-width: 580px) {
  .footer-top a, .footer-top p { font-size: 12.5px; }
  .footer-bottom { gap: 8px; }
}

/* ===========================================================================
   INTERACTION LAYER
   Buttons and cards lift on hover. Nothing follows the cursor and nothing
   tilts: that movement read as bouncy and fought with the pointer.

   Every card sits white at rest so a grid reads as one set, then turns
   lavender on hover. The previous build coloured one tile per grid purple or
   blue, which made those tiles look selected when they were not.
   =========================================================================== */

/* ---------- buttons ------------------------------------------------------ */

.btn { will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; }

/* ---------- one resting state for every card ----------------------------- */

.service-card,
.service-card.featured,
.service-card.blue,
.local-value-grid article,
.local-value-grid article.featured,
.support-card,
.support-card.featured,
.side-card,
.side-card.alt {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 10px 32px rgba(54, 39, 85, .05);
}

/* text and accents that were reversed out on the coloured tiles */
.service-card.featured p,
.service-card.blue p,
.local-value-grid article.featured p,
.support-card.featured p { color: var(--muted); }

.service-card.featured > span,
.service-card.blue > span,
.support-card.featured span { color: var(--purple); }

.local-value-grid article.featured > span,
.support-card.featured > div { color: var(--purple); }

.service-card.featured .service-icon,
.service-card.blue .service-icon { background: #f1e8ff; color: #7938ec; }

.side-card.alt { color: var(--ink); }
.side-card.alt h4 { color: var(--ink); }
.side-card.alt .wa-link { color: var(--purple); opacity: 1; }
.side-card.alt .mini-stats b { color: var(--purple); }
.side-card.alt .mini-stats span { color: var(--muted); }

/* ---------- the lift and the lavender wash ------------------------------- */

.service-card,
.local-value-grid article,
.support-card,
.rel-card,
.case,
.proc-step,
.side-card,
.wk {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background .28s var(--ease), border-color .28s var(--ease);
}

.service-card:hover,
.service-card.featured:hover,
.service-card.blue:hover,
.local-value-grid article:hover,
.local-value-grid article.featured:hover,
.support-card:hover,
.support-card.featured:hover,
.rel-card:hover,
.case:hover,
.proc-step:hover,
.side-card:hover,
.side-card.alt:hover,
.wk:hover {
  transform: translateY(-6px);
  background: linear-gradient(158deg, #e6d7ff 0%, #d3bcf8 100%);
  border-color: #ab86ee;
  box-shadow: 0 24px 52px rgba(84, 38, 180, .22);
}

/* accents warm up with the surface */
.service-card:hover h3,
.local-value-grid article:hover h3,
.support-card:hover h3,
.rel-card:hover h3,
.case:hover h3,
.proc-step:hover h3,
.side-card:hover h4 { color: #46199c; }

.service-card:hover .service-icon { background: #7c39ef; color: #fff; }
.rel-card:hover .svc-tag,
.case:hover .case-sector { background: #7c39ef; color: #fff; }
.proc-step:hover .proc-n,
.support-card:hover > div,
.local-value-grid article:hover > span { color: #46199c; }
.wk:hover .wk-meta { background: transparent; }

/* the work tile keeps its photo, so only the caption area tints */
.wk:hover .wk-media { background: #d3bcf8; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .service-card:hover,
  .local-value-grid article:hover,
  .support-card:hover,
  .rel-card:hover,
  .case:hover,
  .proc-step:hover,
  .side-card:hover,
  .wk:hover { transform: none; }
}

/* ===========================================================================
   TYPE SYSTEM — matched to the SEO build
   ---------------------------------------------------------------------------
   The HyperAI reference sheet is drawn in DM Sans and Manrope at 8-13px. The
   approved SEO site uses Red Hat Display for headings, Montserrat for body,
   a 1.65 body leading and a rem-based scale that is roughly 30% larger.

   This block keeps the HyperAI layout and palette and swaps in that scale.
   It loads last, so it wins over both the base sheet's shorthand `font:`
   declarations (which bake the family in) and the component rules above.
   =========================================================================== */

:root {
  --font-display: 'Red Hat Display', system-ui, -apple-system, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: .72rem;   /* 11.5px — labels, tags, breadcrumbs  */
  --fs-micro:   .78rem;   /* 12.5px — captions, legal, meta      */
  --fs-small:   .84rem;   /* 13.4px — card body, list detail     */
  --fs-body:    .97rem;   /* 15.5px — default paragraph          */
  --fs-h4:      .95rem;
  --fs-h3:     1.14rem;
}

body { font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }

/* ---------- headings ------------------------------------------------------ */

h1, h2, h3, h4,
.hero h1,
.section h2 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -.025em; font-weight: 800; }

.hero h1,
.page-hero-card h1 {
  font: 800 clamp(2.15rem, 4.6vw, 3.5rem)/1.1 var(--font-display);
  letter-spacing: -.035em;
}

.copy-col h2, .section-head h2, .center-copy h2, .faq-col h2,
.showcase-copy h2,
.local-growth-intro h2, .local-services h2, .local-market-copy h2,
.local-block-head h2, .local-closer h2,
.sec-head h2, .lead h2, .cta-card h2 {
  font: 800 clamp(1.7rem, 3.2vw, 2.5rem)/1.1 var(--font-display);
  letter-spacing: -.025em;
}

.prose > h2 { font: 800 clamp(1.45rem, 2.4vw, 1.95rem)/1.15 var(--font-display); letter-spacing: -.025em; }
.center-copy h3, .local-gets h3 { font: 800 clamp(1.2rem, 2.2vw, 1.7rem)/1.15 var(--font-display); }
.local-value-grid h3 { font: 800 clamp(1.15rem, 1.7vw, 1.45rem)/1.2 var(--font-display); letter-spacing: -.02em; }

.service-card h3, .support-card h3, .rel-card h3, .proc-step h3,
.case h3, .prose h3, .faq-screen b, .floating-review b {
  font: 700 var(--fs-h3)/1.3 var(--font-display);
  letter-spacing: -.015em;
}
.case h3 { font-size: 1.28rem; font-weight: 800; }

.side-card h4, .footer-top h4, .contact-direct h4 {
  font: 700 var(--fs-h4) var(--font-display);
  letter-spacing: -.01em;
}

/* ---------- body copy ----------------------------------------------------- */

p, .copy-col > p, .center-copy > p, .section-head p, .sec-head p,
.prose p, .lead > div > p, .side-card p,
.local-answer p, .local-services-copy p, .local-market-copy p, .local-closer p,
.local-value-grid p, .quick p, .case p, .cta-card p {
  font-size: var(--fs-body);
  line-height: 1.65;
}
.prose p { line-height: 1.8; }

.service-card p, .support-card p, .rel-card p, .proc-step p,
.hero-bottom-card p, .local-service-list small, .local-process small,
.feature-list small, .wk-meta i, .mini-stats span, .work-cap, .fx-note,
.form-note, .agent-foot, .lb-fig figcaption span {
  font-size: var(--fs-small);
  line-height: 1.6;
}

ul.tick li, .check-row span, .prose li { font-size: var(--fs-body); line-height: 1.7; }

/* ---------- labels, eyebrows, tags ---------------------------------------- */

.eyebrow, .crumb, .quick > span, .svc-tag, .case-sector, .proc-n,
.text-link, .wa-link, .field label, .local-answer strong,
.support-card > div, .feature-list article > div, .local-value-grid article > span,
.hero-tech-card span:not(.pulse-dot), .case-person > span, .local-process li > span,
.avatars span, .faq-screen span, .page-hero-proof span, .hero-proof span,
.stats-card span, .case-stats span, .service-card > span, .support-card span,
.service-foot a, .mf, .phone small {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
}
.eyebrow, .crumb { letter-spacing: .16em; }
.text-link, .wa-link, .service-card > span, .support-card span,
.service-foot a, .mf, .page-hero-proof span, .hero-proof span,
.stats-card span, .case-stats span, .local-value-grid article > span,
.support-card > div, .feature-list article > div, .proc-n {
  letter-spacing: .08em;
}
.mf, .service-foot a { letter-spacing: .02em; font-size: var(--fs-micro); }
.case-stats span, .page-hero-proof span, .hero-proof span, .stats-card span {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em;
}

/* ---------- numerals ------------------------------------------------------ */

.hero-proof strong, .page-hero-proof strong { font: 800 1.65rem var(--font-display); }
.stats-card strong { font: 800 2rem var(--font-display); }
.case-stats b, .mini-stats b, .metric-chip b, .hero-tech-card b,
.case-person > strong, .floating-review b {
  font-family: var(--font-display);
  font-weight: 800;
}
.case-stats b { font-size: 1.35rem; }
.mini-stats b { font-size: 1.35rem; }

/* ---------- navigation, buttons, controls --------------------------------- */

.desktop-nav { font-family: var(--font-body); font-size: .87rem; font-weight: 600; }
.drop-menu a { font-size: .86rem; font-weight: 600; }
.mobile-panel a { font: 600 .95rem var(--font-body); }
.phone strong { font-family: var(--font-display); font-size: .88rem; font-weight: 800; }

.btn { font-family: var(--font-body); font-size: .88rem; font-weight: 700; min-height: 48px; padding: 0 24px; }
.btn-sm { font-size: .82rem; min-height: 40px; padding: 0 18px; }

.acc > button { font: 700 var(--fs-h4)/1.4 var(--font-display); letter-spacing: -.01em; }
.acc-body p { font-size: var(--fs-body); line-height: 1.7; }

.testimonial > p { font: 600 clamp(1.05rem, 1.6vw, 1.35rem)/1.55 var(--font-display); letter-spacing: -.015em; }
.case-hook { font: 700 var(--fs-body)/1.5 var(--font-display); }

.field input, .field select, .field textarea,
.agent-input input { font-family: var(--font-body); font-size: var(--fs-body); }
.agent-body .msg, .agent-opts .opt { font-size: var(--fs-small); }
.agent-head strong { font-family: var(--font-display); font-size: var(--fs-h4); }

.logo-track span { font: 800 .92rem var(--font-display); letter-spacing: .06em; }
.skip-link { font: 700 var(--fs-body) var(--font-display); }
.hero-bottom-card strong, .local-service-list b, .local-process b,
.feature-list b, .side-card h4, .case-person b, .purple-quote p {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
}
.footer-top a, .footer-top p { font-size: var(--fs-small); }
.footer-bottom { font-size: var(--fs-micro); }

/* ---------- room for the larger scale ------------------------------------- */

.testimonial-track { min-height: 300px; }
.service-card { min-height: 330px; }
.support-card { min-height: 260px; }
.rel-card { min-height: 230px; }
.local-value-grid article { min-height: 280px; }
.local-value-grid h3 { margin-top: 38px; }
.service-icon { margin-bottom: 30px; }

@media (max-width: 580px) {
  .testimonial-track { min-height: 420px; }
  .service-card { min-height: 270px; }
}

/* ---------- size floor ----------------------------------------------------
   The base sheet's later wide-canvas pass re-declares a few sizes with higher
   specificity than the role selectors above, and drops some decorative labels
   to 8-10px. The SEO build's smallest type is .72rem, so nothing goes under
   that here. */

.hero-copy > p { font-size: var(--fs-body); line-height: 1.65; }
.hero-note { font-size: var(--fs-eyebrow); letter-spacing: .04em; }

small,
.hero-actions small,
.hero-tech-card small,
.purple-quote small,
.faq-screen small,
.metric-chip small,
.floating-review small,
.phone small { font-size: var(--fs-eyebrow); }

.case-person div small,
.agent-head div small,
.hero-bottom-card > a span,
.btn span,
.nav-drop > button span,
.footer-cta,
.text-link,
.service-card > span,
.support-card span { font-size: var(--fs-eyebrow); }

@media (min-width: 1500px) {
  .hero-copy > p { font-size: 1.05rem; }
}

/* ---------- header fit ----------------------------------------------------
   The SEO type scale makes the nav wider than the reference sheet planned
   for, so it wrapped to two rows between about 1050px and 1120px. Keep the
   links on one line and drop the phone block before the row can break. */

.desktop-nav > a,
.nav-drop > button { white-space: nowrap; }

@media (max-width: 1180px) {
  .phone { display: none; }
  .desktop-nav { gap: 20px; }
}
@media (max-width: 1000px) {
  .desktop-nav { gap: 15px; font-size: .82rem; }
  .header-actions .btn-dark { padding: 0 16px; font-size: .8rem; }
}


/* ---------- shared eyebrow point marker ---------------------------------
   Replaces the old short dash on every page while keeping the existing
   eyebrow markup, spacing, text, colour and responsive behaviour unchanged. */
.eyebrow > i {
  position: relative;
  display: inline-block;
  width: 30px !important;
  height: 16px !important;
  min-width: 30px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  flex: 0 0 30px;
}
.eyebrow > i::before,
.eyebrow > i::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 15px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(0 0, 38% 0, 100% 50%, 38% 100%, 0 100%, 62% 50%);
}
.eyebrow > i::before { left: 0; }
.eyebrow > i::after { left: 10px; }

/* About keeps its direct link and also opens the Team dropdown on hover/focus. */
.nav-drop > .nav-drop-link {
  position: relative;
  border: 0;
  background: none;
  padding: 8px 0;
  cursor: pointer;
  color: #292631;
  display: inline-flex;
  align-items: center;
}
.nav-drop > .nav-drop-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  transition: right .3s;
}
.nav-drop:hover > .nav-drop-link::after,
.nav-drop > .nav-drop-link.active::after { right: 0; }
.nav-drop > .nav-drop-link span { font-size: 10px; margin-left: 3px; }
.nav-drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: none; }

/* ---------- team page --------------------------------------------------- */
.team-intro { max-width: 760px; margin-bottom: 38px; }
.team-intro h2 {
  font: 800 clamp(32px, 3.6vw, 48px)/1.06 Manrope, sans-serif;
  letter-spacing: -.045em;
  margin: 0 0 14px;
}
.team-intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.team-card {
  overflow: hidden;
  border: 1px solid #ece7f3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(52, 34, 82, .06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.team-card:hover {
  transform: translateY(-5px);
  border-color: #ddd1ef;
  box-shadow: 0 22px 52px rgba(52, 34, 82, .1);
}
.team-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(145deg, #f3edff 0%, #ece9ff 48%, #fbeaf7 100%);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 40px Manrope, sans-serif;
  color: #7c39ef;
  opacity: .5;
}
.team-info { padding: 18px 18px 20px; }
.team-info h3 { margin: 0 0 5px; font: 800 17px Manrope, sans-serif; color: var(--ink); }
.team-info .team-role { margin: 0 0 10px; color: #7c39ef; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.team-info p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.65; }

@media (max-width: 1050px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .team-card { border-radius: 16px; }
  .team-photo { aspect-ratio: 16 / 11; }
}


/* ===== FINAL REQUESTED UPDATES: CTA VISUAL + NAV ARROW ALIGNMENT ===== */

/* Fill the intentionally open side of the final CTA with a page-relevant image. */
.cta-card.has-image {
  grid-template-columns: minmax(260px, 1.03fr) minmax(0, .97fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "visual copy"
    "visual actions";
  column-gap: clamp(34px, 4vw, 64px);
  row-gap: 24px;
  min-height: 360px;
  align-items: center;
  padding: 34px 42px;
}
.cta-card.has-image .cta-visual {
  grid-area: visual;
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 292px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 46px rgba(20,8,66,.24);
}
.cta-card.has-image .cta-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(34,14,91,.18), rgba(118,56,224,.08));
}
.cta-card.has-image .cta-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.03);
}
.cta-card.has-image .cta-copy {
  grid-area: copy;
  align-self: end;
}
.cta-card.has-image .cta-actions {
  grid-area: actions;
  justify-content: flex-start;
  align-self: start;
}

/* Keep the About/Services dropdown arrow immediately after the text and vertically centred. */
.desktop-nav .nav-drop > button,
.desktop-nav .nav-drop > .nav-drop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
}
.desktop-nav .nav-drop > button > span,
.desktop-nav .nav-drop > .nav-drop-link > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  line-height: 1;
  height: 1em;
  transform: translateY(-1px);
}

@media (max-width: 820px) {
  .cta-card.has-image {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "visual"
      "copy"
      "actions";
    min-height: 0;
    padding: 34px;
    row-gap: 22px;
  }
  .cta-card.has-image .cta-visual {
    min-height: 260px;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 580px) {
  .cta-card.has-image { padding: 22px; }
  .cta-card.has-image .cta-visual {
    min-height: 190px;
    border-radius: 14px;
  }
}

/* ===== FINAL CTA COMPACT HEIGHT + HERO IMAGE SYNC ===== */
/* Keep the last purple CTA compact instead of leaving a large empty area. */
.cta-card.has-image {
  min-height: 0;
  padding: 28px 32px;
  column-gap: clamp(28px, 3.4vw, 52px);
  row-gap: 16px;
}

.cta-card.has-image .cta-visual {
  min-height: 0;
  height: clamp(220px, 19vw, 265px);
  align-self: center;
}

.cta-card.has-image .cta-copy h2 {
  font: 800 clamp(1.35rem, 1.9vw, 1.8rem)/1.16 var(--font-display);
  letter-spacing: -.025em;
  margin-bottom: 10px;
}

.cta-card.has-image .cta-copy p {
  max-width: 560px;
}

@media (max-width: 820px) {
  .cta-card.has-image {
    padding: 26px;
    row-gap: 18px;
  }

  .cta-card.has-image .cta-visual {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 580px) {
  .cta-card.has-image {
    padding: 20px;
  }

  .cta-card.has-image .cta-copy h2 {
    font-size: 1.35rem;
  }
}


/* ===== 2026-09-10 FINAL CTA HEIGHT FIX =====
   Keep the coloured CTA compact on desktop. The !important values are
   intentional so older responsive CTA rules cannot make the box tall again. */
@media (min-width: 821px) {
  .cta-card.has-image {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    box-sizing: border-box !important;
    padding: 18px 26px !important;
    column-gap: clamp(24px, 3vw, 44px) !important;
    row-gap: 10px !important;
    align-items: center !important;
  }

  .cta-card.has-image .cta-visual {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    align-self: center !important;
    border-radius: 16px !important;
  }

  .cta-card.has-image .cta-copy h2 {
    font-size: clamp(22px, 1.75vw, 27px) !important;
    line-height: 1.12 !important;
    margin-bottom: 7px !important;
  }

  .cta-card.has-image .cta-copy p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .cta-card.has-image .cta-actions {
    gap: 10px !important;
  }
}

/* Keep the stacked CTA compact on tablet/mobile too. */
@media (max-width: 820px) {
  .cta-card.has-image {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 20px !important;
    row-gap: 14px !important;
  }

  .cta-card.has-image .cta-visual {
    min-height: 0 !important;
    height: auto !important;
    max-height: 210px !important;
    aspect-ratio: 16 / 8 !important;
  }
}