:root {
  --blue: #1b5e97;
  --blue-d: #123f68;
  --blue-l: #e7eff8;
  --navy: #16324f;
  --navy-d: #0f2439;
  --gold: #c8a24c;
  --gold-d: #a9863a;
  --ink: #1f2a33;
  --muted: #5b6a73;
  --line: #e4e9ec;
  --bg: #ffffff;
  --bg-tint: #f3f7fb;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(15, 36, 57, .08);
  --shadow-lg: 0 18px 50px rgba(15, 36, 57, .14);
  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  /* clip does NOT create a scroll container, so position:sticky keeps working */
  overflow-x: clip
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

h1,
h2,
h3,
h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  line-height: 1.22;
  color: var(--navy);
  font-weight: 700
}

h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem)
}

/* Pages keep a single H1 + H2 for SEO — section headings drop to H3/H4
   but must still look like section headings. */
.sec-head h3,
.about-copy h3,
.tech-copy h3,
.loc-info h3,
.cta-inner h3 {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem)
}

.cta-inner h3 {
  color: #fff
}

.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px
}

.ic {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto
}

.eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px
}

.eyebrow--light {
  color: var(--gold)
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .94rem;
  padding: 12px 24px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap
}

.btn .ic {
  transition: transform .3s var(--ease)
}

/* shine sweep */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  z-index: -1;
  width: 70%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transition: left .55s var(--ease)
}

.btn:hover::before {
  left: 130%
}

.btn:hover {
  transform: translateY(-3px)
}

.btn:active {
  transform: translateY(-1px) scale(.98);
  transition-duration: .08s
}

.btn:hover .ic {
  transform: translateX(2px)
}

/* All CTAs share ONE design — GOLD fill + navy text, flips to NAVY on hover */
.btn-primary,
.btn-ghost,
.btn-ghost-light {
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(200, 162, 76, .34)
}

.btn-primary:hover,
.btn-ghost:hover,
.btn-ghost-light:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(22, 50, 79, .4)
}

/* WhatsApp — kept brand green for instant recognition */
.btn-whatsapp {
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, .3)
}

.btn-whatsapp:hover {
  background: #1eb457;
  box-shadow: 0 14px 30px rgba(37, 211, 102, .45)
}

/* icon-only buttons keep no nudge */
.btn-whatsapp .ic {
  transition: none
}

.btn-whatsapp:hover .ic {
  transform: none
}

/* ---------- Preloader (clean light + DNA helix) ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #eef3f4 100%);
  transition: opacity .6s var(--ease-smooth), visibility .6s
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden
}

.pre-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  color: var(--navy);
  letter-spacing: .02em;
  opacity: 0;
  animation: pre-fade .7s var(--ease-smooth) forwards
}

.pre-sub {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-d);
  opacity: 0;
  animation: pre-fade .7s var(--ease-smooth) .15s forwards
}

@keyframes pre-fade {
  to {
    opacity: 1
  }
}

/* DNA double-helix loader */
.dna {
  display: flex;
  gap: 7px;
  height: 58px;
  align-items: center;
  margin: 4px 0
}

.dna span {
  position: relative;
  width: 8px;
  height: 34px;
  display: block
}

.dna span::before,
.dna span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  animation: dna 1.4s ease-in-out infinite
}

.dna span::before {
  background: var(--gold);
  animation-delay: calc(var(--i) * -0.11s)
}

.dna span::after {
  background: var(--navy);
  animation-delay: calc(var(--i) * -0.11s - 0.7s)
}

@keyframes dna {

  0%,
  100% {
    transform: translateY(-13px) scale(1);
    opacity: 1
  }

  50% {
    transform: translateY(13px) scale(.45);
    opacity: .5
  }
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-d);
  color: #cdd8e0;
  font-size: .82rem
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 16px
}

.topbar-addr,
.tb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cdd8e0;
  transition: color .2s
}

.topbar-addr:hover,
.tb-link:hover {
  color: #fff
}

.topbar-addr .ic,
.tb-link .ic {
  fill: var(--gold);
  width: 15px;
  height: 15px
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px
}

/* keep every top-bar item on one line and drop the least critical ones as space runs out */
.topbar-addr,
.tb-link {
  white-space: nowrap
}

@media(max-width:1350px) {
  .tb-hide-lg {
    display: none
  }
}

@media(max-width:1150px) {
  .tb-hide-md {
    display: none
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s
}

.site-header.scrolled {
  box-shadow: 0 6px 24px rgba(15, 36, 57, .1)
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  gap: 20px
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand-logo {
  height: 68px;
  width: auto;
  display: block;
  transition: transform .3s var(--ease)
}

.brand:hover .brand-logo {
  transform: scale(1.03)
}

.brand-logo--foot {
  height: 60px;
  max-width: 100%
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Poppins';
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(27, 94, 151, .3)
}

.brand-text strong {
  display: block;
  font-family: 'Poppins';
  font-size: 1.02rem;
  color: var(--navy);
  line-height: 1.15
}

.brand-text small {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .02em
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none
}

.nav-list>li>a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  font-family: 'Poppins';
  font-weight: 500;
  font-size: .92rem;
  color: var(--navy);
  border-radius: 8px;
  transition: color .2s, background .2s;
  position: relative
}

.nav-list>li>a:not(.btn):hover,
.nav-list>li>a.active {
  color: var(--gold-d)
}

.nav-list>li>a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease)
}

.nav-list>li>a:not(.btn):hover::after,
.nav-list>li>a.active::after {
  transform: scaleX(1)
}

.caret {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform .25s
}

.has-drop:hover .caret {
  transform: rotate(180deg)
}

.nav-cta {
  color: #fff !important
}

.nav-cta::after {
  display: none
}

/* dropdown + mega */
.has-drop {
  position: relative
}

.dropdown,
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 50
}

.dropdown {
  min-width: 250px;
  list-style: none
}

.dropdown li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .9rem;
  color: var(--navy);
  transition: background .18s, color .18s, padding-left .18s
}

.dropdown li a:hover {
  background: rgba(200, 162, 76, .14);
  color: var(--gold-d);
  padding-left: 18px
}

.mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 3px;
  width: min(768px, 92vw);
  padding: 12px
}

.mega a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .80rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
  transition: background .2s, color .2s, padding-left .2s
}

.mega a::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .45;
  transition: opacity .2s, transform .2s
}

.mega a:hover {
  background: rgba(200, 162, 76, .14);
  color: var(--gold-d);
  padding-left: 16px
}

.mega a:hover::before {
  opacity: 1;
  transform: scale(1.35)
}

.has-drop:hover>.dropdown,
.has-drop:hover>.mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.has-mega {
  position: static
}

.has-mega .mega {
  left: 50%;
  transform: translate(-50%, 10px)
}

.has-mega:hover .mega {
  transform: translate(-50%, 0)
}

/* nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px
}

/* mobile menu close button — hidden on desktop */
.nav-close {
  display: none
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .3s, opacity .3s
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg)
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg)
}

/* ---------- Sections ---------- */
.section {
  padding: 70px 0
}

.section--tint {
  background: var(--bg-tint)
}

.section--dark {
  background: linear-gradient(160deg, var(--navy), var(--navy-d));
  color: #e8eef3
}

.section--dark h2,
.section--dark h3 {
  color: #fff
}

.sec-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px
}

.sec-sub {
  color: var(--muted);
  margin-top: 10px
}

.section--dark .sec-sub {
  color: #b9c6d2
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 60px 0 70px;
  overflow: hidden;
  background: linear-gradient(160deg, #f3f7fb 0%, #eaf1f9 55%, #e3ebf5 100%)
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 520px at 88% -10%, rgba(27, 94, 151, .16), transparent 60%),
    radial-gradient(420px 420px at 100% 110%, rgba(200, 162, 76, .16), transparent 60%)
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center
}

.hero-badge {
  display: inline-block;
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--blue-l);
  font-family: 'Poppins';
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .06em;
  padding: 7px 14px;
  border-radius: 50px;
  box-shadow: var(--shadow);
  margin-bottom: 16px
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  color: var(--navy)
}

.hero-title {
  font-family: 'Poppins';
  font-weight: 500;
  color: var(--blue);
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-top: 8px
}

.hero-creds {
  color: var(--muted);
  margin-top: 10px;
  font-size: .95rem
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0
}

.hero-mini {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 8px
}

.hero-mini li {
  font-size: .86rem;
  color: var(--muted)
}

.hero-mini strong {
  display: block;
  font-family: 'Poppins';
  font-size: 1.4rem;
  color: var(--navy);
  line-height: 1
}

/* hero photo */
.hero-photo {
  position: relative;
  display: flex;
  justify-content: center
}

/* ---------- Hero SVG animation (DNA helix + endocrine orbits) ---------- */
.hero-art .endo-art {
  width: min(460px, 88vw);
  height: auto;
  display: block;
  overflow: visible
}

/* phones: drop the decorative art so the copy leads */
@media(max-width:767px) {
  .hero-art {
    display: none
  }
}

.ea-ring,
.ea-arc,
.ea-orbit {
  transform-box: view-box;
  transform-origin: 260px 260px
}

.ea-ring {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.4;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
  opacity: .38
}

.ea-ring--a {
  animation: eaSpin 70s linear infinite
}

.ea-ring--b {
  stroke: var(--gold);
  stroke-dasharray: 3 16;
  opacity: .5;
  animation: eaSpinRev 52s linear infinite
}

.ea-arc {
  fill: none;
  stroke: url(#eaGold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 300 907;
  animation: eaArc 14s linear infinite
}

.ea-pulse {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: eaPulse 4.8s ease-out infinite;
  animation-delay: var(--d, 0s)
}

/* orbiting speciality chips */
.ea-orbit {
  animation: eaSpin 46s linear infinite
}

.ea-orbit-fix {
  transform-box: fill-box;
  transform-origin: center;
  animation: eaSpinRev 46s linear infinite
}

.ea-chip {
  fill: #fff;
  filter: url(#eaShadow)
}

.ea-icon path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* DNA double helix at the centre */
.ea-helix-in {
  transform-box: fill-box;
  transform-origin: center;
  animation: eaFloat 7s ease-in-out infinite
}

/* backbone segments — width and opacity come from the depth of each segment */
.ea-helix line {
  stroke-linecap: round;
  stroke-width: var(--w, 3);
  opacity: var(--o, 1)
}

.dna--t {
  stroke: var(--blue)
}

.dna--g {
  stroke: var(--gold)
}

.dna-rung {
  stroke-dasharray: 0
}

/* nucleotide spheres — shaded with a radial gradient, gently shimmering */
.dna-node {
  opacity: var(--o, 1);
  transform-box: fill-box;
  transform-origin: center;
  animation: dnaShimmer 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s)
}

/* floating cards */
.ea-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: eaFloat 6s ease-in-out infinite;
  animation-delay: var(--d, 0s)
}

.ea-card {
  fill: #fff;
  filter: url(#eaShadow)
}

.ea-gauge-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 8
}

.ea-gauge {
  fill: none;
  stroke: url(#eaGold);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 195;
  stroke-dashoffset: 62;
  /* end state, so the ring still reads when motion is reduced */
  animation: eaGauge 6s ease-in-out infinite
}

.ea-t-sm,
.ea-t-lg {
  font-family: 'Poppins', sans-serif;
  text-anchor: middle
}

.ea-t-sm {
  font-size: 13px;
  font-weight: 500;
  fill: var(--muted)
}

.ea-t-lg {
  font-size: 19px;
  font-weight: 700;
  fill: var(--navy)
}

.ea-t-left {
  text-anchor: start
}

.ea-live {
  fill: #2f80c9;
  animation: eaBlink 2s ease-in-out infinite
}

.ea-trend {
  fill: none;
  stroke: url(#eaLine);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 260;
  animation: eaDraw 7s ease-in-out infinite
}

.ea-trend-dot {
  fill: var(--gold);
  stroke: #fff;
  stroke-width: 2;
  offset-path: path("M18 78 C 44 52, 62 88, 88 66 S 132 40, 156 58 S 186 66, 198 44");
  animation: eaTrack 7s ease-in-out infinite
}

.ea-dot {
  fill: var(--gold);
  opacity: .45;
  transform-box: fill-box;
  transform-origin: center;
  animation: eaFloat 7s ease-in-out infinite;
  animation-delay: var(--d, 0s)
}

@keyframes eaSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes eaSpinRev {
  to {
    transform: rotate(-360deg)
  }
}

@keyframes eaArc {
  to {
    stroke-dashoffset: -1207
  }
}

@keyframes eaPulse {
  0% {
    transform: scale(.7);
    opacity: .5
  }

  70% {
    opacity: 0
  }

  100% {
    transform: scale(2.35);
    opacity: 0
  }
}

@keyframes dnaShimmer {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.22)
  }
}

@keyframes eaFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes eaGauge {
  0% {
    stroke-dashoffset: 195
  }

  55%,
  100% {
    stroke-dashoffset: 62
  }
}

@keyframes eaDraw {
  0% {
    stroke-dashoffset: 260
  }

  55%,
  100% {
    stroke-dashoffset: 0
  }
}

@keyframes eaTrack {
  0% {
    offset-distance: 0%;
    opacity: 0
  }

  8% {
    opacity: 1
  }

  55%,
  100% {
    offset-distance: 100%;
    opacity: 1
  }
}

@keyframes eaBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

.photo-stage {
  position: relative;
  width: min(380px, 82vw)
}

.photo-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 5/6;
  border-radius: 30px 30px 30px 60px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-d));
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff
}

/* offset gold outline behind photo */
.photo-ring {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 30px 30px 30px 60px;
  border: 2px solid var(--gold);
  transform: translate(18px, 18px);
  transition: transform .5s var(--ease-smooth)
}

.hero-photo:hover .photo-ring {
  transform: translate(12px, 12px)
}

/* gold dot-pattern accent (echoes the DNA theme) */
.photo-dots {
  position: absolute;
  z-index: 0;
  top: -16px;
  left: -16px;
  width: 78px;
  height: 78px;
  background: radial-gradient(var(--gold) 2px, transparent 2.6px);
  background-size: 15px 15px;
  opacity: .55;
  border-radius: 6px
}

/* floating experience badge */
.float-badge {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: -16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: var(--shadow-lg);
  animation: floaty 3.5s ease-in-out infinite
}

.fb-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--gold-d);
  line-height: 1
}

.fb-txt {
  font-family: 'Poppins', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .03em
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top
}

.photo-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 4rem;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .05em
}

.photo-frame.no-img .photo-fallback {
  display: grid
}

.photo-tag {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--navy);
  font-family: 'Poppins';
  font-weight: 600;
  font-size: .8rem;
  padding: 9px 16px;
  border-radius: 50px;
  box-shadow: var(--shadow-lg)
}

.photo-tag .ic {
  fill: var(--gold-d)
}

.photo-stage--sm {
  width: min(340px, 82vw)
}

.photo-frame--sm {
  width: 100%;
  border-radius: 30px 30px 30px 60px
}

@media(max-width:560px) {
  .float-badge {
    right: 2px;
    top: 16px;
    padding: 8px 12px
  }

  .photo-dots {
    width: 60px;
    height: 60px;
    top: -12px;
    left: -12px
  }

  .topbar {
    display: none;
  }

  .page-banner h1 {
    font-size: clamp(1.4rem, 4.6vw, 3rem) !important;
  }

}

/* ---------- Trust strip ---------- */
.trust {
  background: var(--navy);
  color: #dbe6ef;
  overflow: hidden
}

.trust-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.trust-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 15px 0;
  animation: trust-scroll 34s linear infinite;
  will-change: transform
}

.trust-track:hover {
  animation-play-state: paused
}

.trust-track span {
  flex: 0 0 auto;
  position: relative;
  padding: 0 26px 0 46px;
  font-size: .86rem;
  font-family: 'Poppins';
  font-weight: 500;
  white-space: nowrap
}

.trust-track span::before {
  content: "✓";
  position: absolute;
  left: 26px;
  color: var(--gold);
  font-weight: 700
}

@keyframes trust-scroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 48px;
  align-items: center
}

.about-media {
  position: relative;
  display: flex;
  justify-content: center
}

.exp-badge {
  position: absolute;
  z-index: 3;
  right: -11px;
  bottom: -6px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: var(--shadow-lg);
}

.exp-badge strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--gold-d);
  line-height: 1
}

.exp-badge span {
  font-family: 'Poppins', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .03em
}

.about-copy p {
  text-align: justify;
  color: var(--muted);
  margin: 14px 0
}

.tick-list {
  list-style: none;
  margin: 16px 0 24px;
  display: grid;
  gap: 10px
}

.tick-list li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230e6b60'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat
}

/* ---------- Cards grid (specialities / posts) ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.cards-grid--3 {
  grid-template-columns: repeat(3, 1fr)
}

/* centred "view all" button under a cards grid */
.sec-more {
  text-align: center;
  margin-top: 38px
}

.s-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
  position: relative;
  overflow: hidden
}

.s-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease)
}

.s-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

.s-card:hover::before {
  transform: scaleX(1)
}

/* card variant with a photo instead of an icon (services page) */
.s-card--img {
  padding: 0;
  display: flex;
  flex-direction: column
}

.s-thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--blue-l)
}

.s-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-smooth)
}

.s-card--img:hover .s-thumb img {
  transform: scale(1.06)
}

.s-body {
  display: block;
  padding: 22px 24px 26px
}

.s-card--img .s-link {
  margin-top: 14px
}

.s-ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-l);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  transition: background .3s
}

.s-ic svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke .3s
}

.s-card:hover .s-ic {
  background: var(--gold)
}

.s-card:hover .s-ic svg {
  stroke: #fff
}

.s-card h3,
.s-card h4 {
  font-size: 1.12rem;
  margin-bottom: 6px
}

.s-card p {
  color: var(--muted);
  font-size: .92rem
}

.s-link {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: .86rem;
  color: var(--blue);
  transition: letter-spacing .25s
}

.s-card:hover .s-link {
  letter-spacing: .03em
}

/* ---------- Why choose ---------- */
.why {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-d) 100%);
  color: #dbe6ef
}

.why::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(560px 340px at 85% -10%, rgba(200, 162, 76, .14), transparent 60%),
    radial-gradient(480px 320px at 5% 110%, rgba(200, 162, 76, .08), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1.6px);
  background-size: auto, auto, 26px 26px
}

.why .container {
  position: relative;
  z-index: 1
}

.why h2,
.why h3,
.why .eyebrow {
  color: #fff
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.why-item {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 30px 26px 28px;
  transition: transform .35s var(--ease-smooth), background .35s, border-color .35s, box-shadow .35s
}

/* gold sweep bar on top, reveals on hover */
.why-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-d));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-smooth)
}

.why-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(200, 162, 76, .5);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .28)
}

.why-item:hover::before {
  transform: scaleX(1)
}

/* faint big number accent */
.why-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: rgb(255 255 255 / 39%);
  transition: color .35s
}

.why-item:hover .why-num {
  color: rgba(200, 162, 76, .3)
}

.why-ic {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(200, 162, 76, .14);
  border: 1px solid rgba(200, 162, 76, .3);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  transition: background .35s, transform .35s var(--ease-smooth)
}

.why-ic svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .35s
}

.why-item:hover .why-ic {
  background: var(--gold);
  transform: translateY(-2px) rotate(-4deg)
}

.why-item:hover .why-ic svg {
  stroke: var(--navy-d)
}

.why-item h3,
.why-item h4 {
  color: #fff;
  font-size: 1.12rem;
  margin-bottom: 7px
}

.why-item p {
  color: #aebccb;
  font-size: .92rem
}

/* ---------- Technology ---------- */
.tech-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center
}

.tech-copy p {
  color: var(--muted);
  margin: 14px 0
}

.tech-visual {
  display: flex;
  justify-content: center
}

.glucose-card {
  width: min(340px, 88vw);
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 22px;
  border: 1px solid var(--line)
}

.gc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Poppins';
  font-weight: 600;
  color: var(--navy)
}

.gc-live {
  font-size: .72rem;
  color: #e05252;
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.gc-value {
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--blue);
  margin: 6px 0 4px
}

.gc-value small {
  font-size: .9rem;
  color: var(--muted);
  font-weight: 500
}

.gc-graph {
  width: 100%;
  height: 70px
}

.gc-graph polyline {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 2.2s var(--ease) forwards
}

.gc-foot {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--muted);
  margin-top: 8px
}

.gc-foot .up {
  color: var(--blue);
  font-weight: 600
}

@keyframes draw {
  to {
    stroke-dashoffset: 0
  }
}

/* ---------- Chips (conditions) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center
}

.chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50px;
  padding: 9px 18px;
  font-size: .88rem;
  font-family: 'Poppins';
  font-weight: 500;
  color: var(--navy);
  transition: transform .22s, background .22s, color .22s, border-color .22s, box-shadow .22s
}

.chip:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(27, 94, 151, .28)
}

/* ---------- Testimonials slider ---------- */
.slider {
  position: relative
}

.slider-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 18px;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.slider-track::-webkit-scrollbar {
  display: none
}

.review {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 44px)/3);
  min-width: 280px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 26px;
  transition: background .3s, transform .3s
}

.review:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-4px)
}

.stars {
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 12px
}

.review p {
  color: #dbe6ef;
  font-size: .95rem
}

.review-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: #3a2c07;
  display: grid;
  place-items: center;
  font-family: 'Poppins';
  font-weight: 700
}

.review-by strong {
  color: #fff;
  font-size: .95rem;
  display: block
}

.review-by small {
  color: #a9bccb;
  font-size: .8rem
}

.slider-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px
}

.s-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, transform .25s
}

.s-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #3a2c07;
  transform: scale(1.05)
}

/* ---------- CTA banner ---------- */
/* blue band — deliberately lighter than the navy footer that follows it */
.cta-banner {
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-d) 55%, #0e3357 100%);
  color: #fff;
  position: relative;
  overflow: hidden
}

/* alternative look: navy fading into gold (add cta-banner--gold to the section) */
.cta-banner--gold {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-d) 42%, #8a6c2f 78%, var(--gold) 100%)
}

.cta-banner--gold::after {
  background: rgba(255, 255, 255, .10)
}

.cta-banner::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(200, 162, 76, .18)
}

.cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 46px 20px;
  flex-wrap: wrap
}

.cta-inner h2 {
  color: #fff
}

.cta-inner p {
  color: #d6f0eb;
  margin-top: 8px
}

.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

/* ---------- Posts ---------- */
.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg)
}

.post-thumb {
  position: relative;
  display: block;
  /* fixed height first, so the image can never spill over the card text
     on a browser without aspect-ratio support */
  height: 210px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  overflow: hidden
}

@supports (aspect-ratio: 16 / 9) {
  .post-thumb {
    height: auto;
    aspect-ratio: 16 / 9
  }
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s
}

.post-card:hover .post-thumb img {
  transform: scale(1.06)
}

/* category badge sits over the image */
.post-thumb span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(15, 36, 57, .78);
  color: #fff;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .05em;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  backdrop-filter: blur(4px)
}

.post-body h4 a {
  color: var(--navy);
  transition: color .2s
}

.post-body h4 a:hover {
  color: var(--blue)
}

.post-body {
  padding: 22px
}

.post-body h3,
.post-body h4 {
  font-size: 1.08rem;
  margin-bottom: 8px
}

.post-body p {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 12px
}

/* ---------- FAQ ---------- */
.faq-wrap {
  max-width: 820px
}

/* ---------- Sitemap page ---------- */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px
}

.sitemap-col h3 {
  font-size: 1.1rem;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line)
}

.sitemap-col h3:not(:first-child) {
  margin-top: 30px
}

.sitemap-col .foot-links a {
  color: var(--ink)
}

.sitemap-col .foot-links a:hover {
  color: var(--blue)
}

@media(max-width:860px) {
  .sitemap-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:560px) {
  .sitemap-grid {
    grid-template-columns: 1fr;
    gap: 26px
  }
}

/* ---------- Blog article ---------- */
/* contents rail on the left, article on the right */
.article-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 40px;
  align-items: start
}

@media(max-width:960px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 26px
  }
}

.article-side {
  position: sticky;
  top: 96px;
  align-self: start
}

@media(max-width:960px) {
  .article-side {
    position: static
  }
}

.article {
  /* width:100% keeps the grid item on the track — with margin:auto alone it
     shrink-to-fits around the widest child (the comparison table) */
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  min-width: 0
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-size: .86rem;
  color: var(--muted)
}

.article-cat {
  background: var(--blue-l);
  color: var(--blue);
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 50px
}

.article-lead {
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 18px
}

.article p {
  color: var(--muted);
  margin-bottom: 16px
}

.article h3 {
  font-size: 1.3rem;
  margin: 36px 0 12px
}

.article h4 {
  font-size: 1.05rem;
  margin: 24px 0 8px
}

.article ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 4px 0 20px
}

.article ul li {
  position: relative;
  padding-left: 26px;
  color: var(--muted)
}

.article ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold)
}

.article a {
  color: var(--blue);
  font-weight: 600
}

.article a:hover {
  color: var(--gold-d);
  text-decoration: underline
}

/* comparison table */
.article-table-wrap {
  overflow-x: auto;
  margin: 8px 0 24px;
  -webkit-overflow-scrolling: touch
}

/* only useful once the table starts scrolling inside its wrapper */
.table-hint {
  display: none;
  margin: 0 0 6px;
  font-size: .82rem;
  color: var(--muted)
}

@media(max-width:700px) {
  .table-hint {
    display: block
  }
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: .93rem;
  min-width: 520px
}

.article-table th,
.article-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line)
}

.article-table thead th {
  background: var(--navy);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: .86rem;
  letter-spacing: .02em
}

.article-table tbody th {
  background: var(--bg-tint);
  color: var(--navy);
  font-weight: 600;
  width: 26%
}

.article-table td {
  color: var(--muted)
}

/* key-points callout */
.article-note {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 26px 0
}

.article-note h4 {
  margin: 0 0 10px;
  font-size: 1rem
}

.article-note ul {
  margin-bottom: 0
}

/* keyword tags under an article */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line)
}

.tag {
  background: var(--blue-l);
  color: var(--blue);
  border: 1px solid rgba(27, 94, 151, .18);
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 50px;
  transition: background .22s, color .22s, border-color .22s
}

.tag:hover {
  background: linear-gradient(135deg, var(--navy), var(--navy-d));
  border-color: transparent;
  color: #fff
}

/* author box */
.author-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-top: 34px
}

.author-card img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 68px
}

.author-card h4 {
  margin: 0 0 4px;
  font-size: 1.05rem
}

.author-card p {
  margin: 0;
  font-size: .88rem;
  color: var(--muted)
}

@media(max-width:560px) {
  .author-card {
    flex-direction: column;
    text-align: center
  }
}

/* ---------- Legal pages (terms, privacy) ---------- */
.legal {
  max-width: 860px;
  margin: 0 auto
}

.legal-updated {
  display: inline-block;
  background: var(--blue-l);
  color: var(--blue);
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 50px;
  margin-bottom: 22px
}

.legal-lead {
  font-size: 1.02rem;
  color: var(--muted);
  margin-bottom: 8px
}

.legal-block {
  margin-top: 34px
}

.legal-block h3 {
  font-size: 1.25rem;
  margin-bottom: 10px
}

.legal-block h4 {
  font-size: 1.02rem;
  margin: 18px 0 8px
}

.legal-block p {
  color: var(--muted);
  margin-bottom: 12px
}

.legal-block ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 4px 0 14px
}

.legal-block li {
  position: relative;
  padding-left: 26px;
  color: var(--muted)
}

.legal-block li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold)
}

.legal-block a {
  color: var(--blue);
  font-weight: 600
}

.legal-block a:hover {
  color: var(--gold-d);
  text-decoration: underline
}

.legal-note {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 14px
}

.legal-note p:last-child {
  margin-bottom: 0
}

/* ---------- Thank-you page ---------- */
.ty-card {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 44px 32px 36px;
  box-shadow: 0 18px 44px rgba(15, 36, 57, .08)
}

.ty-tick {
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--blue-l);
  margin-bottom: 20px
}

.ty-tick svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ty-card h2 {
  margin-bottom: 12px
}

.ty-lead {
  color: var(--muted);
  font-size: 1.03rem;
  max-width: 54ch;
  margin: 0 auto 18px
}

.ty-hours {
  font-size: .92rem;
  color: var(--muted);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.ty-hours strong {
  color: var(--navy)
}

.ty-urgent {
  background: linear-gradient(160deg, var(--navy), var(--navy-d));
  border-radius: 20px;
  padding: 34px 32px;
  margin-bottom: 40px;
  text-align: center
}

.ty-urgent h3 {
  color: #fff;
  margin-bottom: 10px
}

.ty-urgent p {
  color: #cfdcea;
  max-width: 64ch;
  margin: 0 auto 22px
}

.ty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center
}

.ty-next {
  max-width: 720px;
  margin: 0 auto 40px
}

.ty-next h3,
.ty-explore h3 {
  margin-bottom: 14px
}

.ty-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.ty-links a {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  transition: transform .25s, box-shadow .25s, border-color .25s
}

.ty-links a:hover {
  transform: translateY(-4px);
  border-color: rgba(27, 94, 151, .35);
  box-shadow: 0 14px 30px rgba(15, 36, 57, .09)
}

.ty-links strong {
  display: block;
  color: var(--navy);
  font-family: 'Poppins', sans-serif;
  font-size: .98rem;
  margin-bottom: 4px
}

.ty-links span {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.55
}

@media(max-width:900px) {
  .ty-links {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .ty-card {
    padding: 34px 22px 28px
  }

  .ty-urgent {
    padding: 28px 20px
  }

  .ty-links {
    grid-template-columns: 1fr
  }

  .ty-actions .btn {
    width: 100%;
    justify-content: center
  }
}

/* ---------- 404 page ---------- */
.nf-card {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px
}

.nf-code {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 8.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--navy) 10%, var(--blue) 50%, var(--gold-d) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px
}

.nf-card h2 {
  margin-bottom: 12px
}

.nf-lead {
  color: var(--muted);
  font-size: 1.03rem;
  max-width: 56ch;
  margin: 0 auto 24px
}

.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center
}

.nf-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 36px;
  border-top: 1px solid var(--line)
}

.nf-col h3 {
  font-size: 1.1rem;
  margin-bottom: 12px
}

/* .foot-links is styled for the dark footer — recolour it for this light page */
.nf-list a {
  color: var(--muted)
}

.nf-list a:hover {
  color: var(--blue)
}

.nf-list strong {
  color: var(--navy)
}

@media(max-width:860px) {
  .nf-cols {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .nf-cols {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .nf-actions .btn {
    width: 100%;
    justify-content: center
  }
}

/* Two-column FAQ layout (FAQ page) */
.faq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: start
}

@media(max-width:820px) {
  .faq-cols {
    grid-template-columns: 1fr
  }
}

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .25s, border-color .25s
}

.faq-item.open {
  box-shadow: var(--shadow);
  border-color: var(--blue-l)
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 18px 22px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px
}

.faq-plus {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  background: var(--blue);
  border-radius: 2px;
  transition: transform .3s
}

.faq-plus::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px
}

.faq-plus::after {
  left: 9px;
  top: 0;
  width: 2px;
  height: 20px
}

.faq-item.open .faq-plus::after {
  transform: rotate(90deg);
  opacity: 0
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease)
}

.faq-a p {
  padding: 0 22px 18px;
  color: var(--muted)
}

/* ---------- Location ---------- */
.loc-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 40px;
  align-items: stretch
}

.loc-list {
  list-style: none;
  margin: 18px 0 24px;
  display: grid;
  gap: 16px
}

.loc-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.loc-list .ic {
  fill: var(--blue);
  width: 22px;
  height: 22px;
  margin-top: 2px
}

.loc-list a:hover {
  color: var(--blue)
}

.loc-map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 340px;
  border: 1px solid var(--line)
}

.loc-map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block
}

/* Map card inside a tinted band (contact page) */
.map-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  line-height: 0;
  background: #fff
}

.map-card iframe {
  width: 100%;
  height: 480px;
  border: 0;
  display: block
}

@media(max-width:820px) {
  .map-card iframe {
    height: 400px
  }
}

@media(max-width:560px) {
  .map-card iframe {
    height: 320px
  }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy-d);
  color: #b7c4d1;
  font-size: .92rem
}

/* top gold accent line */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold), transparent)
}

/* soft glow + faint dot texture */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(620px 340px at 8% -12%, rgba(200, 162, 76, .12), transparent 60%),
    radial-gradient(520px 320px at 104% 118%, rgba(200, 162, 76, .08), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.6px);
  background-size: auto, auto, 24px 24px
}

.footer-grid,
.foot-bottom {
  position: relative;
  z-index: 1
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 36px;
  padding: 60px 20px 40px
}

.brand--foot .brand-text strong {
  color: #fff
}

.brand--foot .brand-text small {
  color: #8ea0b1
}

.foot-about {
  margin: 16px 0;
  color: #93a5b5;
  font-size: .88rem
}

.foot-social {
  display: flex;
  gap: 10px
}

.foot-social a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  transition: background .25s, transform .25s, border-color .25s
}

.foot-social a svg {
  width: 18px;
  height: 18px;
  fill: #cdd8e0;
  transition: fill .25s
}

.foot-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-3px)
}

.foot-social a:hover svg {
  fill: var(--navy-d)
}

.foot-col h4 {
  position: relative;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 20px;
  padding-bottom: 10px
}

.foot-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold)
}

.foot-links,
.foot-contact {
  list-style: none;
  display: grid;
  gap: 10px
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #a7b6c4;
  transition: color .25s
}

.foot-links a::before {
  content: "+";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-d);
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(200, 162, 76, .35);
  transition: transform .35s var(--ease), background .25s
}

.foot-links a:hover {
  color: var(--gold)
}

.foot-links a:hover::before {
  transform: rotate(90deg) scale(1.1)
}

/* contact items with icon chips */
.foot-contact {
  gap: 16px
}

.foot-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #a7b6c4;
  line-height: 1.5
}

.fc-ic {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(200, 162, 76, .12);
  border: 1px solid rgba(200, 162, 76, .28);
  transition: background .25s, transform .25s
}

.fc-ic svg {
  width: 16px;
  height: 16px;
  fill: var(--gold)
}

.foot-contact li:hover .fc-ic {
  background: var(--gold);
  transform: translateY(-2px)
}

.foot-contact li:hover .fc-ic svg {
  fill: var(--navy-d)
}

.foot-contact strong {
  color: #fff;
  font-weight: 600
}

.foot-contact a {
  transition: color .2s
}

.foot-contact a:hover {
  color: var(--gold)
}

.foot-col .btn {
  margin-top: 18px
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.foot-bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 20px;
  font-size: .82rem;
  color: #cacbcc;
}

.foot-legal a:hover {
  color: var(--gold)
}

.foot-credit a:hover {
  color: var(--gold)
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none
}

.modal.open {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 16px
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 36, 57, .55);
  backdrop-filter: blur(4px);
  opacity: 0;
  animation: fade .35s var(--ease) forwards
}

.modal-box {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 20px;
  padding: 34px 32px;
  box-shadow: 0 30px 80px rgba(15, 36, 57, .35);
  transform-origin: center;
  animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) both
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2f5f6;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color .25s, transform .35s var(--ease), background .25s
}

.modal-close:hover {
  color: #fff;
  background: var(--gold);
  transform: rotate(90deg)
}

.modal-box h3 {
  font-size: 1.5rem;
  padding-right: 44px
}

.modal-sub {
  color: var(--muted);
  margin: 6px 0 22px;
  font-size: .92rem
}

.book-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.fld--full {
  grid-column: 1/-1
}

.fld input,
.fld select,
.fld textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: .94rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s, box-shadow .2s
}

.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 162, 76, .2)
}

.consent-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fbfcfd;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, background .2s
}

.consent-box:hover {
  border-color: rgba(200, 162, 76, .5)
}

.consent-box input[type=checkbox] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--gold);
  cursor: pointer
}

.consent-box a {
  color: var(--gold-d);
  font-weight: 600
}

.consent-box a:hover {
  text-decoration: underline
}

.form-note--error {
  background: rgba(239, 68, 68, .1);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, .35)
}

.form-note {
  grid-column: 1/-1;
  background: rgba(200, 162, 76, .14);
  color: var(--gold-d);
  border: 1px solid rgba(200, 162, 76, .3);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .9rem;
  text-align: center
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.92)
  }

  60% {
    opacity: 1
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

/* click ripple (all buttons) */
.ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .5);
  pointer-events: none;
  animation: ripple .6s var(--ease) forwards
}

@keyframes ripple {
  to {
    transform: scale(2.6);
    opacity: 0
  }
}

/* ---------- Scroll reveal (extra smooth) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity 1.2s var(--ease-smooth), transform 1.2s var(--ease-smooth), filter 1.2s var(--ease-smooth);
  will-change: opacity, transform, filter
}

.reveal--left {
  transform: translateX(-32px)
}

.reveal--right {
  transform: translateX(32px)
}

.reveal--zoom {
  transform: scale(.96)
}

.reveal--fade {
  transform: none
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none
}

.reveal.in {
  will-change: auto
}

/* =========================================================
   Responsive
========================================================= */
@media(max-width:960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center
  }

  .hero-actions,
  .hero-mini {
    justify-content: center
  }

  .hero-photo {
    order: -1
  }

  .about-grid,
  .tech-grid,
  .loc-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .exp-badge {
    right: -8px
  }

  .cards-grid,
  .cards-grid--3,
  .why-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .review {
    flex-basis: calc((100% - 22px)/2)
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:960px) {
  .tb-hide-sm {
    display: none
  }

  .nav-toggle {
    display: flex
  }

  /* backdrop-filter creates a containing block for position:fixed children,
     which traps the full-screen menu inside the (sticky) header — remove it on mobile */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }

  .main-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: #fff;
    padding: 84px 22px 40px;
    transform: translateX(100%);
    transition: transform .4s var(--ease-smooth);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000
  }

  .main-nav.open {
    transform: translateX(0)
  }

  .nav-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 18px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f1f4f5;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    color: var(--navy);
    cursor: pointer;
    transition: background .25s, color .25s, transform .4s var(--ease)
  }

  .nav-close:hover {
    background: var(--gold);
    color: #fff;
    transform: rotate(90deg)
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-width: 460px;
    margin: 0 auto
  }

  .nav-list>li>a {
    padding: 14px 12px;
    font-size: 1.05rem
  }

  .nav-list>li>a::after {
    display: none
  }

  .dropdown,
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid rgba(200, 162, 76, .35);
    border-radius: 0;
    margin: 0 0 4px 12px;
    padding: 2px 0 2px 8px;
    display: none;
    width: auto
  }

  .mega {
    grid-template-columns: 1fr
  }

  /* On touch devices :hover sticks after a tap, and the desktop rules
     `.has-mega:hover .mega` / `.has-drop:hover > .mega` outrank a plain
     `.has-mega .mega` even from inside this media query — media queries add
     no specificity. Without matching their specificity the open mega menu
     keeps translate(-50%) and slides off the left edge of the screen. */
  .has-mega .mega,
  .has-mega:hover .mega,
  .has-drop:hover>.mega,
  .has-drop:hover>.dropdown {
    transform: none;
    left: auto
  }

  .has-drop.open>.dropdown,
  .has-drop.open>.mega {
    display: block
  }

  .has-mega.open>.mega {
    display: grid
  }

  .caret {
    margin-left: auto
  }

  .nav-cta-li {
    margin-top: 14px;
    width: 100%
  }

  .main-nav .nav-cta {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
    justify-content: center;
    white-space: nowrap;
    box-shadow: none;
    padding: 14px 12px
  }

  .section {
    padding: 52px 0
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left
  }
}

@media(max-width:560px) {

  .cards-grid,
  .cards-grid--3,
  .why-grid {
    grid-template-columns: 1fr
  }

  .review {
    flex-basis: 88%
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 60px 20px 40px;
  }


  .book-form {
    grid-template-columns: 1fr
  }

  .modal.open {
    padding: 14px 12px
  }

  .modal-box {
    padding: 26px 18px;
    border-radius: 16px
  }

  .modal-box h3 {
    font-size: 1.3rem;
    padding-right: 40px
  }

  .modal-sub {
    margin-bottom: 18px
  }

  /* 16px prevents iOS Safari from auto-zooming on input focus */
  .fld input,
  .fld select,
  .fld textarea {
    font-size: 16px
  }

  .topbar-right {
    gap: 12px;
    margin-left: auto
  }

  .topbar-addr {
    display: none
  }

  .brand-logo {
    height: 100%;
  }

  .hero-mini {
    gap: 18px
  }

  .foot-bottom-inner {
    flex-direction: column;
    padding: 18px 20px 80px;
    text-align: center;
  }
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none
  }

  .trust-track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    transform: none
  }

  .trust-track span[aria-hidden] {
    display: none
  }
}

/* =========================================================
   ABOUT PAGE
========================================================= */
.page-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--navy-d) url(../images/breadcrumbs.webp) center right/cover no-repeat;
  color: #dbe6ef;
  padding: 100px 0 100px;
  background-position: bottom;
}

/* navy overlay — strong on the left (text), fades right so the image shows */
.page-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 320px at 90% -10%, rgba(200, 162, 76, .16), transparent 60%),
    linear-gradient(100deg, rgba(15, 36, 57, .96) 0%, rgba(15, 36, 57, .9) 40%, rgba(15, 36, 57, .58) 72%, rgba(15, 36, 57, .28) 100%)
}

.page-banner-inner {
  position: relative;
  z-index: 1;
}

.page-banner h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  margin: 6px 0 0
}

.page-banner p {
  color: #aebccb;
  max-width: 620px
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: 18px;
  color: #8ea0b1
}

.breadcrumb a {
  color: #aebccb;
  transition: color .2s
}

.breadcrumb a:hover {
  color: var(--gold)
}

.breadcrumb span[aria-current] {
  color: var(--gold)
}

/* profile intro */
.profile-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 52px;
  align-items: center
}

.profile-copy .profile-role {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--gold-d);
  margin: 4px 0 14px
}

.profile-copy p {
  color: var(--muted)
}

.profile-facts {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px 0 26px
}

.profile-facts li {
  display: flex;
  align-items: center;
  gap: 12px
}

.pf-ic {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--blue-l);
  display: grid;
  place-items: center
}

.pf-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.profile-facts strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: .92rem;
  color: var(--navy)
}

.profile-facts small {
  color: var(--muted);
  font-size: .82rem
}

/* philosophy band */
.philosophy-band {
  background: linear-gradient(160deg, var(--navy), var(--navy-d));
  color: #fff;
  padding: 56px 0;
  text-align: center
}

.philosophy-band .container {
  max-width: 820px;
  position: relative
}

.quote-mark {
  width: 54px;
  height: 54px;
  fill: rgba(255, 255, 255, .28);
  margin: 0 auto 6px
}

.philosophy-band p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.5;
  font-style: italic
}

.philosophy-by {
  display: inline-block;
  margin-top: 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold)
}

/* qualifications */
.qual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.qual-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px 22px;
  transition: transform .35s var(--ease-smooth), box-shadow .35s, border-color .35s
}

.qual-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

.qual-year {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: rgba(200, 162, 76, .5);
  font-size: 1.05rem
}

.qual-ic {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: var(--blue-l);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  transition: background .3s
}

.qual-ic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s
}

.qual-card:hover .qual-ic {
  background: var(--gold)
}

.qual-card:hover .qual-ic svg {
  stroke: #fff
}

.qual-card h3,
.qual-card h4 {
  font-size: 1.05rem;
  margin-bottom: 6px
}

.qual-card p {
  color: var(--muted);
  font-size: .86rem;
  margin-bottom: 10px
}

.qual-place {
  font-family: 'Poppins', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  color: var(--gold-d)
}

/* timeline */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 1px
}

.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--gold), var(--blue-l))
}

.tl-item {
  position: relative;
  padding: 0 0 22px 40px
}

.tl-item:last-child {
  padding-bottom: 0
}

.tl-dot {
  position: absolute;
  left: 2px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--gold);
  z-index: 1;
  transition: transform .3s
}

.tl-item--now .tl-dot {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(200, 162, 76, .22)
}

.tl-item:hover .tl-dot {
  transform: scale(1.18)
}

.tl-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  transition: transform .3s var(--ease-smooth), box-shadow .3s, border-color .3s
}

.tl-item:hover .tl-card {
  transform: translateX(4px);
  box-shadow: var(--shadow);
  border-color: var(--blue-l)
}

.tl-tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-d);
  background: rgba(200, 162, 76, .12);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 7px
}

.tl-card h3,
.tl-card h4 {
  font-size: 1.02rem;
  margin-bottom: 3px
}

.tl-card p {
  color: var(--muted);
  font-size: .88rem
}

/* expertise */
.expertise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px
}

.expertise-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 28px;
  transition: box-shadow .35s, transform .35s var(--ease-smooth)
}

.expertise-col:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px)
}

.ex-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line)
}

.ex-ic {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  display: grid;
  place-items: center
}

.ex-ic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ex-head h3,
.ex-head h4 {
  font-size: 1.2rem
}

/* memberships */
.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.member-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 18px;
  text-align: center;
  transition: transform .35s var(--ease-smooth), box-shadow .35s, border-color .35s
}

.member-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

/* society / association logo — different shapes, so keep one common box */
.member-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  margin: 0 auto 18px;
  overflow: hidden
}

.member-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* the scale crops the white margin baked into each logo file */
  transform: scale(var(--s, 1));
  filter: saturate(.92);
  transition: filter .3s, transform .35s var(--ease-smooth)
}

.member-card:hover .member-logo img {
  filter: saturate(1);
  transform: scale(calc(var(--s, 1) * 1.05))
}

.member-ic {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--blue-l);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  transition: background .3s
}

.member-ic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s
}

.member-card:hover .member-ic {
  background: var(--gold)
}

.member-card:hover .member-ic svg {
  stroke: #fff
}

.member-card p {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .92rem;
  color: var(--navy)
}

/* awards (dark section) */
.award-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 14px
}

.award-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 18px 20px;
  transition: background .3s, transform .3s, border-color .3s
}

.award-item:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateX(4px);
  border-color: rgba(200, 162, 76, .4)
}

.award-ic {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(200, 162, 76, .14);
  border: 1px solid rgba(200, 162, 76, .3);
  display: grid;
  place-items: center
}

.award-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.award-tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px
}

.award-item p {
  color: #cdd8e0;
  font-size: .92rem
}

/* static chips (conferences) */
.chip--static {
  cursor: default
}

.chip--static:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-3px)
}

/* about-page responsive */
/* keep profile CTAs left-aligned even when hero-actions is centered on mobile */
.profile-copy .hero-actions {
  justify-content: flex-start;
  flex-wrap: wrap
}

@media(max-width:960px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .qual-grid,
  .member-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .page-banner {
    min-height: 260px;
    padding: 80px 0 50px
  }

  .page-banner-bg {
    background:
      radial-gradient(400px 260px at 92% -10%, rgba(200, 162, 76, .14), transparent 60%),
      linear-gradient(100deg, rgba(15, 36, 57, .95) 0%, rgba(15, 36, 57, .9) 55%, rgba(15, 36, 57, .78) 100%)
  }
}

@media(max-width:560px) {
  .page-banner {
    min-height: 210px;
    padding: 64px 0 40px
  }

  .qual-grid,
  .member-grid {
    grid-template-columns: 1fr
  }

  .profile-facts {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .philosophy-band {
    padding: 42px 0
  }

  .expertise-col {
    padding: 24px 20px
  }

  .qual-card {
    padding: 22px 18px
  }

  .tl-card {
    padding: 14px 16px
  }

  .tl-item {
    padding-left: 34px
  }

  .award-item {
    padding: 15px 16px;
    gap: 12px
  }

  .award-ic {
    flex: 0 0 38px;
    width: 38px;
    height: 38px
  }

  .profile-copy .hero-actions .btn {
    flex: 1 1 auto
  }
}

/* =========================================================
   SERVICES PAGE — full list
========================================================= */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 28px;
  max-width: 960px;
  margin: 0 auto
}

.sl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .95rem;
  color: var(--navy);
  transition: color .22s, padding-left .25s var(--ease), background .22s;
  border-radius: 8px
}

.sl-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 162, 76, .15);
  transition: transform .25s, box-shadow .25s
}

.sl-item:hover {
  color: var(--gold-d);
  padding-left: 18px;
  background: #fff
}

.sl-item:hover .sl-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(200, 162, 76, .25)
}

@media(max-width:820px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 22px
  }
}

@media(max-width:520px) {
  .service-list {
    grid-template-columns: 1fr
  }
}

/* =========================================================
   SERVICE DETAIL PAGE
========================================================= */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 44px;
  align-items: start
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blue-l);
  color: var(--blue);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  padding: 7px 14px 7px 8px;
  border-radius: 50px;
  margin-bottom: 16px
}

.s-ic--inline {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--gold);
  display: grid;
  place-items: center;
  margin: 0
}

.s-ic--inline svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.svc-lead {
  color: var(--muted);
  font-size: 1.02rem;
  margin-top: 4px;
  margin-bottom: 14px;
}

/* Featured image inside a service page */
.svc-figure {
  margin: 30px 0 30px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(22, 50, 79, .14)
}

.svc-figure img {
  display: block;
  width: 100%;
  height: auto
}

.svc-figure figcaption {
  padding: 10px 14px;
  font-size: .84rem;
  color: var(--muted);
  background: var(--bg-tint)
}

.svc-block {
  margin-top: 34px
}

.svc-block h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  margin-bottom: 16px
}

.svc-h-ic {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-l);
  display: grid;
  place-items: center
}

.svc-h-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.svc-ticks {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px
}

.svc-ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
  font-size: .95rem
}

.svc-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230e6b60'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat
}

/* sidebar */
.svc-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px
}

.svc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px
}

.svc-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px
}

.svc-card h4 {
  font-size: 1rem;
  margin-bottom: 14px;
  color: var(--navy)
}

.svc-card--dark {
  background: linear-gradient(160deg, var(--navy), var(--navy-d));
  border-color: transparent;
  color: #cdd8e0;
  box-shadow: var(--shadow-lg)
}

.svc-card--dark h3 {
  color: #fff
}

.svc-card--dark p {
  font-size: .9rem;
  margin-bottom: 16px
}

.svc-card--dark .btn {
  width: 100%
}

.svc-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 1.02rem
}

.svc-call .ic {
  fill: var(--gold)
}

.svc-call:hover {
  color: var(--gold)
}

.tick-list--sm li {
  font-size: .9rem;
  padding-left: 28px
}

.tick-list--sm li::before {
  top: 2px
}

.svc-related {
  list-style: none;
  display: grid;
  gap: 4px
}

.svc-related a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .9rem;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  transition: color .2s, padding-left .2s
}

.svc-related li:last-child a {
  border-bottom: 0
}

.svc-related a:hover {
  color: var(--gold-d);
  padding-left: 6px
}

@media(max-width:960px) {
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .svc-side {
    position: static
  }
}

@media(max-width:560px) {
  .svc-ticks {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .svc-block h3 {
    font-size: 1.12rem
  }
}