/* ANDtr homepage — front-page.php only. */

.andtr-home * { box-sizing: border-box; }
.andtr-home { margin: 0; background: #ffffff; color: #0e1620; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-family: 'Raleway', system-ui, sans-serif; }
/* The site-wide default link colour, written with :where() so it carries
   element-only specificity (0,0,1) and behaves as a true base that ANY more
   specific rule beats.

   Every .btn is an <a>, as are the nav labels, footer links and top-bar
   links. Written the obvious way, ".andtr-home a" is (0,1,1) and silently
   outranks .btn--primary (0,1,0) and .nav-item__link (0,1,0) no matter what
   order they appear in — which painted button labels and the main menu
   link-blue. A :not(.btn) carve-out fixed the buttons but made it worse
   elsewhere, because :not() ADDS its argument's specificity: at (0,2,1) it
   then outranked .site-footer__col a, .nav-item__panel a, .breadcrumb a and
   the rest. :where() contributes zero, so everything with a class wins and
   no carve-out is needed. */
.andtr-home a { text-decoration: none; }
:where(.andtr-home) a { color: #0b6f9e; }
.andtr-home ::selection { background: #35a8e0; color: #fff; }
.andtr-home :focus-visible { outline: 2px solid #35a8e0; outline-offset: 2px; }
.andtr-home img { max-width: 100%; display: block; }
.andtr-home h1, .andtr-home h2, .andtr-home h3 { font-family: 'Raleway', sans-serif; }

.section-inner { max-width: 1440px; margin: 0 auto; }

/* ---------- keyframes ---------- */
@keyframes andDrift { 0% { transform: translate3d(0,0,0) } 50% { transform: translate3d(0,-18px,0) } 100% { transform: translate3d(0,0,0) } }
@keyframes andPulse { 0% { opacity: .25 } 50% { opacity: .7 } 100% { opacity: .25 } }
@keyframes andSweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
@keyframes andSpin { to { transform: rotate(360deg) } }
@keyframes andA1 {
  0%,2% { opacity: 0; transform: translateZ(calc(var(--z) + 60cqw)) rotateZ(18deg) scale(1.22) }
  4% { opacity: 1 }
  12%,80% { opacity: 1; transform: translateZ(var(--z)) rotateZ(0deg) scale(1) }
  86%,100% { opacity: 0; transform: translateZ(calc(var(--z) - 16cqw)) rotateZ(0deg) scale(0.88) }
}
@keyframes andA2 {
  0%,15% { opacity: 0; transform: translateZ(calc(var(--z) + 60cqw)) rotateZ(18deg) scale(1.22) }
  17% { opacity: 1 }
  25%,80% { opacity: 1; transform: translateZ(var(--z)) rotateZ(0deg) scale(1) }
  86%,100% { opacity: 0; transform: translateZ(calc(var(--z) - 16cqw)) rotateZ(0deg) scale(0.88) }
}
@keyframes andA3 {
  0%,28% { opacity: 0; transform: translateZ(calc(var(--z) + 60cqw)) rotateZ(18deg) scale(1.22) }
  30% { opacity: 1 }
  38%,80% { opacity: 1; transform: translateZ(var(--z)) rotateZ(0deg) scale(1) }
  86%,100% { opacity: 0; transform: translateZ(calc(var(--z) - 16cqw)) rotateZ(0deg) scale(0.88) }
}
@keyframes andA4 {
  0%,41% { opacity: 0; transform: translateZ(calc(var(--z) + 60cqw)) rotateZ(18deg) scale(1.22) }
  43% { opacity: 1 }
  51%,80% { opacity: 1; transform: translateZ(var(--z)) rotateZ(0deg) scale(1) }
  86%,100% { opacity: 0; transform: translateZ(calc(var(--z) - 16cqw)) rotateZ(0deg) scale(0.88) }
}
@keyframes andCue1 { 0%,10% { opacity: 0 } 14%,80% { opacity: 1 } 84%,100% { opacity: 0 } }
@keyframes andCue4 { 0%,49% { opacity: 0 } 53%,80% { opacity: 1 } 84%,100% { opacity: 0 } }
@keyframes andT1 { 0%,2% { opacity: 0 } 5%,80% { opacity: 1 } 84%,100% { opacity: 0 } }
@keyframes andT2 { 0%,15% { opacity: 0 } 18%,80% { opacity: 1 } 84%,100% { opacity: 0 } }
@keyframes andT3 { 0%,28% { opacity: 0 } 31%,80% { opacity: 1 } 84%,100% { opacity: 0 } }
@keyframes andT4 { 0%,41% { opacity: 0 } 44%,80% { opacity: 1 } 84%,100% { opacity: 0 } }
@keyframes andDraw1 { 0%,12% { stroke-dashoffset: 260; opacity: 0 } 15% { opacity: 1 } 30%,80% { stroke-dashoffset: 0; opacity: 1 } 84%,100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes andBlink { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
@keyframes andRock { 0%,100% { transform: rotateX(62deg) rotateZ(-40deg) } 50% { transform: rotateX(58deg) rotateZ(-28deg) } }
@keyframes andScan { 0% { top: -14% } 55%,100% { top: 104% } }
@keyframes andTrace { 0%,25% { stroke-dashoffset: 260 } 42%,80% { stroke-dashoffset: 0 } 84%,100% { stroke-dashoffset: 260 } }
@keyframes andMarquee { 0% { transform: translateX(0) } 100% { transform: translateX(calc(-50% - 12px)) } }

/* ---------- header ---------- */
/* Slim utility strip above the main header. Deliberately not sticky: it
   scrolls away and .site-header then pins to the top on its own, so the
   sticky nav doesn't get taller as you scroll. */
.topbar { background: #f2f7fb; border-bottom: 1px solid rgba(14,22,32,0.08); }
.topbar__inner { max-width: 1440px; margin: 0 auto; padding: 0 5vw; display: flex; justify-content: flex-end; }
.topbar__links { display: flex; gap: 26px; }
.topbar__links a { display: inline-block; padding: 8px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: #4d5a67; transition: color .2s; }
.topbar__links a:hover { color: #0b6f9e; }

.site-header { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(18px); background: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(14,22,32,0.1); }
.site-header__inner { display: flex; align-items: center; gap: 40px; max-width: 1440px; margin: 0 auto; padding: 14px 5vw; }
.site-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.site-logo img { height: 80px; width: auto; }
.site-nav { display: flex; gap: 6px; margin-left: auto; }
/* The trigger's padding-bottom physically extends .nav-item down to where
   the panel starts, so the pointer never leaves the hovered element on its
   way into the menu. The negative margin keeps the header's height
   unchanged. (A pseudo-element "bridge" alone wasn't reliable — the panel
   it belongs to is pointer-events:none until hover, so the hover could drop
   in the gap and close the menu before you reached it.) */
.nav-item { position: relative; padding-bottom: 12px; margin-bottom: -12px; }
.nav-item__link { display: block; padding: 10px 16px; font-size: 15px; font-weight: 600; color: #0e1620; letter-spacing: -0.01em; border-radius: 999px; transition: background-color .2s, color .2s; }
.nav-item__link:hover { background: rgba(53,168,224,0.14); color: #0b6f9e; }
.nav-item:hover .nav-item__link, .nav-item:focus-within .nav-item__link { background: rgba(53,168,224,0.14); color: #0b6f9e; }
.nav-item__panel { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,0.98); border: 1px solid rgba(14,22,32,0.12); box-shadow: 0 30px 60px -30px rgba(14,22,32,0.28); backdrop-filter: blur(20px); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s .14s, transform .2s .14s; }
/* Small close delay above gives a grace period for diagonal mouse travel;
   opening is instant. */
.nav-item:hover .nav-item__panel, .nav-item:focus-within .nav-item__panel { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
.nav-item__panel a { display: block; padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #33414f; }
.nav-item__panel a:hover { background: rgba(53,168,224,0.12); color: #0b6f9e; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Raleway', sans-serif; transition: background-color .25s, color .25s, border-color .25s; cursor: pointer; border: none; }
.btn--primary { padding: 16px 30px; border-radius: 999px; background: #35a8e0; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.btn--primary:hover { background: #0e1620; color: #fff; }
.btn--nav { padding: 11px 22px; font-size: 15px; }
.btn--outline { padding: 16px 30px; border-radius: 999px; border: 1px solid rgba(14,22,32,0.18); color: #0e1620; font-size: 17px; font-weight: 600; background: transparent; }
.btn--outline:hover { border-color: #35a8e0; color: #0b6f9e; }
.btn--dark { padding: 15px 28px; border-radius: 999px; background: #0e1620; color: #fff; font-size: 17px; font-weight: 700; }
.btn--dark:hover { background: #35a8e0; color: #fff; }
.btn--outline-dark { padding: 16px 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); color: #fff; font-size: 17px; font-weight: 600; background: transparent; }
.btn--outline-dark:hover { border-color: #35a8e0; color: #35a8e0; }
.btn--outline-contact { padding: 17px 34px; border-radius: 999px; border: 1px solid rgba(6,18,28,0.35); color: #06121c; font-size: 18px; font-weight: 700; background: transparent; }
.btn--outline-contact:hover { background: rgba(255,255,255,0.35); }
.contact .btn--dark { padding: 17px 34px; font-size: 18px; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__ctas--center { justify-content: center; }
/* For a CTA row that follows body copy/a bullet list rather than sitting
   directly under a hero heading (where the heading's own margin already
   provides the gap) — without this a button sits flush against whatever's
   above it. */
.hero__ctas--spaced { margin-top: 28px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 120px 5vw 100px; overflow: hidden; }
.hero__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(14,22,32,0.07) 1px,transparent 1px), linear-gradient(90deg,rgba(14,22,32,0.07) 1px,transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 60% 40%,#000 10%,transparent 78%); }
.hero__glow { position: absolute; left: 62%; top: 38%; width: 640px; height: 640px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle,rgba(53,168,224,0.30),transparent 62%); filter: blur(20px); pointer-events: none; transition: left .5s cubic-bezier(.2,.7,.3,1), top .5s cubic-bezier(.2,.7,.3,1); }
.hero__blob { position: absolute; right: -6vw; top: 12%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle,rgba(138,92,192,0.22),transparent 65%); filter: blur(30px); animation: andDrift 14s ease-in-out infinite; }
.hero__inner { position: relative; max-width: 1440px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: 72px; align-items: center; }
.hero__stars { display: flex; gap: 3px; font-size: 22px; color: #f5a623; }
.hero__eyebrow { font-size: 16px; line-height: 1.55; color: #4d5a67; max-width: 620px; margin: 0 0 20px; font-weight: 300; }
.hero__title { font-size: clamp(48px,7.4vw,90px); letter-spacing: -0.022em; font-weight: 800; margin: 0 0 32px; text-align: left; line-height: 0.98; }
.hero__title span { color: #35a8e0; }
.hero__subtitle { font-size: 30px; line-height: 1.55; color: #4d5a67; max-width: 620px; margin: 0 0 44px; }

.hero__visual { position: relative; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; container-type: inline-size; background: #f4f9fd; border: 1px solid rgba(14,22,32,0.10); box-shadow: 0 40px 80px -60px rgba(14,22,32,0.45); }
.hero__visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%,rgba(255,255,255,0.95),rgba(226,240,250,0.9) 70%); }
.hero__scan { position: absolute; left: -30%; right: -30%; top: 0; height: 90px; background: linear-gradient(180deg,transparent,rgba(53,168,224,0.14),transparent); animation: andScan 18s cubic-bezier(0.65,0,0.35,1) infinite; }
.hero__perspective { position: absolute; inset: 0; perspective: 360cqw; perspective-origin: 50% 52%; }
.hero__stack { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-40deg); animation: andRock 28s ease-in-out infinite; }

.hero-card { position: absolute; left: 0; top: 0; width: 46cqw; height: 46cqw; margin: -23cqw 0 0 -23cqw; border-radius: 4cqw; }
.hero-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-card--1 { --z: -21cqw; border: 2px dashed rgba(53,168,224,0.6); background: repeating-linear-gradient(45deg,rgba(53,168,224,0.09) 0 6px,transparent 6px 14px); animation: andA1 18s cubic-bezier(0.22,1.15,0.36,1) infinite; }
.hero-card--2 { --z: -9cqw; border: 2px solid #35a8e0; background: #e3f2fb; background-image: linear-gradient(rgba(53,168,224,0.18) 1px,transparent 1px), linear-gradient(90deg,rgba(53,168,224,0.18) 1px,transparent 1px); background-size: 3.4cqw 3.4cqw; box-shadow: 0 10px 24px -14px rgba(11,111,158,0.6); animation: andA2 18s cubic-bezier(0.22,1.15,0.36,1) infinite; }
.hero-card--3 { --z: 3cqw; border: 2px solid #8a5cc0; background: #f3ecfb; box-shadow: 0 12px 28px -16px rgba(138,92,192,0.7); animation: andA3 18s cubic-bezier(0.22,1.15,0.36,1) infinite; }
.hero-card--4 { --z: 15cqw; border: 2px solid #0e1620; background: #f7fafc; box-shadow: 0 34px 60px -26px rgba(14,22,32,0.45); overflow: hidden; animation: andA4 18s cubic-bezier(0.22,1.15,0.36,1) infinite; }

.hero-card__bars { position: absolute; inset: 5cqw; display: flex; flex-direction: column; gap: 1.7cqw; }
.hero-card__bars .bar { height: 1.3cqw; border-radius: 1cqw; }
.hero-card__sweep { position: absolute; left: -60%; top: 0; width: 60%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); animation: andSweep 6s ease-in-out infinite; animation-delay: 1.5s; }

.cue--1 { animation: andCue1 18s linear infinite; }
.cue--4 { animation: andCue4 18s linear infinite; }
.draw--1 { animation: andDraw1 18s linear infinite; }
.spin { animation: andSpin 16s linear infinite; }
.trace { animation: andTrace 18s linear infinite; }
.blink { animation: andBlink 2.4s ease-in-out infinite; }

.hero__labels { position: absolute; left: 26px; top: 26px; display: flex; flex-direction: column; gap: 13px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hero__label { display: flex; align-items: center; gap: 9px; color: #0e1620; }
.hero__label i { width: 20px; height: 2px; display: block; }
.hero__label--1 { animation: andT1 18s linear infinite; }
.hero__label--2 { animation: andT2 18s linear infinite; }
.hero__label--3 { animation: andT3 18s linear infinite; }
.hero__label--4 { animation: andT4 18s linear infinite; }

.hero__strap { position: absolute; left: 26px; right: 26px; bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero__strap > span:first-child { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #0e1620; }
.hero__badge { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(11,111,158,0.35); background: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0b6f9e; animation: andCue4 18s linear infinite; animation-delay: 0.5s; }

/* ---------- stats ---------- */
.stats { border-top: 1px solid rgba(14,22,32,0.1); border-bottom: 1px solid rgba(14,22,32,0.1); background: #f2f7fb; }
.stats__grid { max-width: 1440px; margin: 0 auto; padding: 0 5vw; display: grid; grid-template-columns: repeat(4,1fr); }
.stat { padding: 52px 24px 52px 0; }
.stat__value { display: flex; align-items: baseline; gap: 2px; font-size: clamp(38px,4.4vw,64px); font-weight: 700; letter-spacing: -0.02em; color: #0e1620; }
.stat__suffix { color: #35a8e0; }
.stat__label { font-size: 15px; color: #66727f; margin-top: 8px; letter-spacing: -0.01em; }

/* ---------- shared section header bits ---------- */
.section-eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.section-eyebrow span { font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #0b6f9e; white-space: nowrap; }
.section-eyebrow i { flex: 1; height: 1px; background: rgba(14,22,32,0.16); display: block; }
.section-kicker { font-size: clamp(28px,3.2vw,48px); line-height: 1.05; letter-spacing: -0.018em; font-weight: 800; color: #35a8e0; margin-bottom: 14px; }
.section-header h2 { font-size: clamp(38px,4.6vw,68px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 800; margin: 0; max-width: 16em; }
.section-lead { font-size: 18px; line-height: 1.6; color: #66727f; max-width: 400px; margin: 0; }
.section-lead--dark { color: #b9c4ce; font-size: 19px; max-width: none; }

.section-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px; justify-content: space-between; margin-bottom: 56px; }
.section-header--stack { display: block; max-width: 900px; margin-bottom: 60px; }
.section-header--stack .section-lead { font-size: 20px; color: #4d5a67; max-width: none; margin-top: 22px; }
.section-header--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 48px; }
.section-header--row h2 { font-size: clamp(34px,3.8vw,56px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 800; margin: 0; }

.link-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #0b6f9e; }
.link-muted { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #66727f; }
.link-muted:hover { color: #0b6f9e; }

/* Base row spacing for bullet lists. Variants (.point-list--dark, the
   accordion body, .platform__points) only ever override the gap value —
   without a base `display: flex` here, `gap` does nothing on a plain block
   .point-list and the rows render flush against each other. */
.point-list { display: flex; flex-direction: column; gap: 10px; }
.point { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: #33414f; }
.point span { width: 6px; height: 6px; border-radius: 50%; background: #35a8e0; margin-top: 8px; flex-shrink: 0; display: block; }

/* ---------- image slot placeholder ---------- */
.image-slot { position: relative; min-height: 420px; background: repeating-linear-gradient(135deg,#eef3f7 0 12px,#e1eaf2 12px 24px); border-left: 1px solid rgba(14,22,32,0.11); }
.image-slot__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; pointer-events: none; }
.image-slot__label { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #0b6f9e; margin: 0; }
.image-slot__note { font-weight: 700; font-size: 13px; color: #66727f; margin: 6px 0 0; }
.image-slot__content .image-slot__note:first-child { margin-top: 0; }
.image-slot--filled { background: none; }
.image-slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }

/* ---------- work / sectors ---------- */
.work { padding: 130px 5vw; background: #e8f2fa; }
.sector-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.sector-tab { padding: 12px 20px; border-radius: 999px; font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: all .25s; background: transparent; color: #4d5a67; border: 1px solid rgba(14,22,32,0.18); }
.sector-tab.is-active { background: #35a8e0; color: #fff; border-color: #35a8e0; }
.sector-panel { display: none; grid-template-columns: minmax(0,1fr) minmax(0,0.85fr); gap: 0; border: 1px solid rgba(14,22,32,0.11); border-radius: 24px; overflow: hidden; background: #ffffff; }
.sector-panel.is-active { display: grid; }
.sector-panel__text { padding: 56px 52px; }
.sector-panel__text h3 { font-size: clamp(28px,2.8vw,42px); line-height: 1.08; letter-spacing: -0.015em; font-weight: 800; margin: 0 0 20px; color: #0e1620; }
.sector-panel__text > p { font-size: 19px; line-height: 1.6; color: #4d5a67; margin: 0 0 30px; }
.sector-panel__points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; }
.sector-panel__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }

/* ---------- make / capabilities ---------- */
.make { padding: 130px 5vw; background: #f2f7fb; color: #0e1620; }
.cap-layout { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 56px; align-items: start; }
.cap-layers { display: flex; flex-direction: column; gap: 12px; }
.cap-layer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; padding: 26px 28px; border-radius: 18px; cursor: pointer; transition: all .3s cubic-bezier(.2,.7,.3,1); color: #0e1620; background: transparent; border: 1px solid rgba(14,22,32,0.12); }
.cap-layer.is-active { background: #fff; border-color: rgba(14,22,32,0.14); box-shadow: 0 22px 44px -32px rgba(14,22,32,0.5); transform: translateX(8px); }
.cap-layer__label { display: flex; align-items: center; gap: 16px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.cap-layer__label i { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; transition: transform .3s; display: block; }
.cap-layer.is-active .cap-layer__label i { transform: scale(1.5); }
.cap-layer__tag { font-weight: 700; font-size: 12px; color: #7b8794; white-space: pre-line; }
.cap-panel { display: none; border: 1px solid rgba(14,22,32,0.12); border-radius: 22px; padding: 44px; background: #fff; box-shadow: 0 30px 60px -40px rgba(14,22,32,0.35); }
.cap-panel.is-active { display: block; }
.cap-panel__tag { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #7b8794; margin-bottom: 16px; }
.cap-panel h3 { font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; font-weight: 800; margin: 0 0 18px; }
.cap-panel p { font-size: 18px; line-height: 1.6; color: #4d5a67; margin: 0 0 28px; }
.cap-panel__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cap-panel__chips span { padding: 8px 14px; border-radius: 999px; background: #eef3f7; font-size: 14px; font-weight: 600; color: #33414f; }

/* ---------- deliver / quotes marquee ---------- */
.deliver { padding: 130px 5vw 110px; background: #e8f2fa; overflow: hidden; }
.deliver .section-header { margin-bottom: 64px; }
.quotes-track { display: flex; gap: 24px; width: max-content; animation: andMarquee 46s linear infinite; }
.quote-card { flex: 0 0 clamp(320px,26vw,420px); margin: 0; padding: 38px; border: 1px solid rgba(14,22,32,0.11); border-radius: 20px; background: #ffffff; box-shadow: 0 22px 44px -38px rgba(14,22,32,0.5); display: flex; flex-direction: column; gap: 22px; transition: border-color .3s; }
.quote-card:hover { border-color: rgba(53,168,224,0.6); }
.quote-card__mark { font-size: 32px; line-height: 1; color: #35a8e0; }
.quote-card blockquote { margin: 0; font-size: 19px; line-height: 1.5; color: #16212e; letter-spacing: -0.01em; }
.quote-card figcaption { margin-top: auto; font-size: 14px; color: #66727f; }

/* ---------- case studies ---------- */
.case-studies { padding: 0 5vw 130px; background: #ffffff; }
/* When this band follows a coloured one, the colour change is a visible
   edge and this band needs its own top padding: the previous section's
   130px of bottom padding sits *above* that edge and reads as part of the
   section above, leaving the heading ("Recent work.", "Monitoring & sensing
   work.") flush against it. Only boundaries with an actual colour change are
   targeted — where .case-studies follows a white section there's no edge and
   the existing spacing is already right.

   .sector-hero counts even though it has no background colour of its own:
   its grid pattern stops at the section edge, which is just as visible. */
.capabilities + .case-studies,
.deliver + .case-studies,
.acc-form + .case-studies,
.sector-hero + .case-studies,
.acc-section--tint + .case-studies,
.acc-section--dark + .case-studies { padding-top: 110px; }
.case-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.case-card { display: block; position: relative; border: 1px solid rgba(14,22,32,0.11); border-radius: 20px; overflow: hidden; background: #ffffff; transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .3s; }
.case-card:hover { transform: translateY(-8px); border-color: rgba(53,168,224,0.55); }
.image-slot--case { aspect-ratio: 16/10; min-height: 0; border-left: none; }
.image-slot--case .image-slot__content { padding: 20px; }
.case-card__kind { position: absolute; top: 18px; left: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.92); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #0b6f9e; }
.case-card__body { padding: 26px 26px 30px; }
.case-card__body h3 { font-size: 23px; line-height: 1.2; letter-spacing: -0.012em; font-weight: 800; margin: 0 0 12px; color: #0e1620; }
.case-card__body p { font-size: 15px; line-height: 1.55; color: #66727f; margin: 0 0 18px; }

/* ---------- spotlight ---------- */
.spotlight { padding: 0 5vw 130px; background: #ffffff; }
.spotlight__card { max-width: 1440px; margin: 0 auto; position: relative; border-radius: 24px; overflow: hidden; background: #f2f7fb; border: 1px solid rgba(14,22,32,0.11); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); }
.spotlight__text { padding: 64px 56px; }
.spotlight__eyebrow { font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a5cc0; margin-bottom: 20px; }
.spotlight__text h2 { font-size: clamp(30px,3.2vw,48px); line-height: 1.08; letter-spacing: -0.018em; font-weight: 800; margin: 0 0 24px; }
.spotlight__text p { font-size: 18px; line-height: 1.6; color: #4d5a67; margin: 0 0 34px; max-width: 34em; }
.spotlight .image-slot { min-height: 400px; }

/* ---------- accelerator ---------- */
.accelerator { position: relative; padding: 130px 5vw; background: #000000; color: #ffffff; overflow: hidden; }
.accelerator__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 75% 20%,#000 5%,transparent 70%); }
.accelerator .section-inner { position: relative; }
.accelerator__header { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 60px; align-items: end; margin-bottom: 56px; }
.accelerator__header h2 { font-size: clamp(40px,5.4vw,86px); line-height: 0.98; letter-spacing: -0.022em; font-weight: 800; margin: 0 0 20px; }
.accelerator__tagline { font-family: 'Raleway', sans-serif; font-size: clamp(20px,2.1vw,30px); line-height: 1.2; font-weight: 600; color: #35a8e0; margin: 0; }
.accelerator__stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 56px; }
.accelerator__stat { padding: 34px 28px; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; background: rgba(255,255,255,0.03); }
.accelerator__stat-value { font-size: clamp(30px,3.2vw,46px); line-height: 1; letter-spacing: -0.02em; font-weight: 800; color: #35a8e0; }
.accelerator__stat-label { font-size: 15px; color: #9aa7b4; margin-top: 12px; line-height: 1.45; }
.accelerator__columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.accelerator__col { padding: 44px 40px; border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; background: rgba(255,255,255,0.03); }
.accelerator__col h3 { font-size: 26px; letter-spacing: -0.012em; font-weight: 800; margin: 0 0 24px; }
/* .section-lead is margin:0 by design (its grid parents own the spacing),
   but in the accelerator block it's followed directly by the CTAs and by a
   bullet list, so both sat flush against the paragraph. Space them to the
   rhythm of the block they're in: the header CTAs match the other heroes'
   text->button gap, the list matches this card's own h3 margin. */
.accelerator__header .hero__ctas { margin-top: 32px; }
.accelerator__col .section-lead { margin-bottom: 24px; }

.point-list--dark { display: flex; flex-direction: column; gap: 14px; }
.point-list--dark .point { font-size: 17px; line-height: 1.5; color: #d5dde5; gap: 14px; }
.point-list--dark .point span { margin-top: 9px; background: #35a8e0; }
.accelerator__footnote { font-size: 16px; line-height: 1.6; color: #9aa7b4; margin: 26px 0 0; }

/* ---------- contact ---------- */
.contact { position: relative; padding: 150px 5vw; background: #35a8e0; color: #06121c; overflow: hidden; }
.contact__dots { position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(255,255,255,0.35) 1.5px,transparent 1.5px); background-size: 34px 34px; opacity: 0.35; animation: andPulse 9s ease-in-out infinite; }
.contact__inner { position: relative; max-width: 1100px; margin: 0 auto; text-align: center; }
.contact__inner h2 { font-size: clamp(42px,6vw,96px); line-height: 0.98; letter-spacing: -0.022em; font-weight: 800; margin: 0 0 26px; }
.contact__inner > p { font-size: 21px; line-height: 1.55; color: #083247; margin: 0 auto 42px; max-width: 34em; }

/* ---------- footer ---------- */
.site-footer { padding: 80px 5vw 40px; background: #f2f7fb; border-top: 1px solid rgba(14,22,32,0.1); }
.site-footer__grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap: 48px; }
.site-footer__brand img { height: 44px; width: auto; margin-bottom: 20px; }
.site-footer__brand p { font-size: 15px; line-height: 1.6; color: #66727f; margin: 0 0 8px; max-width: 26em; }
.site-footer__address { font-weight: 700; font-size: 13px; color: #7b8794; margin: 0; }
.site-footer__title { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #0e1620; margin-bottom: 18px; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a { font-size: 15px; color: #66727f; }
.site-footer__col a:hover { color: #0b6f9e; }
.site-footer__bottom { max-width: 1440px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid rgba(14,22,32,0.1); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 13px; color: #7b8794; }

/* ---------- scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { min-height: auto; padding: 90px 5vw 60px; }
  .hero__inner, .accelerator__header, .accelerator__columns, .cap-layout, .sector-panel.is-active, .spotlight__card { grid-template-columns: 1fr; }
  .hero__visual { aspect-ratio: 1/1; max-width: 480px; margin: 0 auto; }
  .stats__grid, .case-grid, .accelerator__stats { grid-template-columns: repeat(2,1fr); }
  .site-footer__grid { grid-template-columns: repeat(2,1fr); }
  .site-nav { display: none; }
}
@media (max-width: 600px) {
  .stats__grid, .accelerator__stats, .site-footer__grid, .case-grid { grid-template-columns: 1fr; }
  .stat { padding: 32px 0; border-right: none !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .andtr-home * { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}