/* ==========================================================================
   iCAN K-Mint Wealth — Core Stylesheet
   Quiet luxury / editorial / modern family office
   ========================================================================== */

/* ----- Design Tokens ----- */
:root {
  /* Brand */
  --navy:        #0E2341;
  --midnight:    #132B4C;
  --orange:      #F58220;
  --orange-soft: #F8A35C;

  /* Surfaces */
  --offwhite:    #F9F8F5;
  --warmgrey:    #F2F1ED;
  --paper:       #FFFFFF;

  /* Ink */
  --charcoal:    #222222;
  --ink-70:      #4A4A4A;
  --ink-50:      #6E6E6E;
  --hairline:    rgba(14, 35, 65, 0.12);
  --hairline-soft: rgba(14, 35, 65, 0.07);

  /* Type */
  --display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --serif:   "Playfair Display", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 11vw, 10rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--offwhite);
  color: var(--charcoal);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ----- Typography ----- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; color: var(--navy); }
.display-xl { font-size: clamp(2.75rem, 7vw, 6rem); font-weight: 500; }
.display-l  { font-size: clamp(2.25rem, 5vw, 4rem); }
.display-m  { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.display-s  { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-block;
}
.eyebrow.muted { color: var(--ink-50); }
.holistic-eyebrow {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--orange);
}

.lede { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--ink-70); font-weight: 300; }
.muted { color: var(--ink-50); }
em, .italic { font-style: italic; }

/* ----- Layout ----- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.bg-paper  { background: var(--paper); }
.bg-warm   { background: var(--warmgrey); }
.bg-navy   { background: var(--navy); color: #fff; }
.bg-navy h1,.bg-navy h2,.bg-navy h3 { color: #fff; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } }

.measure { max-width: 56ch; }
.measure-sm { max-width: 44ch; }
.center { text-align: center; margin-inline: auto; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.04em; padding: 1rem 1.9rem; border-radius: 2px;
  transition: all 0.4s var(--ease); position: relative;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: #e0741a; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(245,130,32,0.5); }
.btn--ghost { border: 1px solid currentColor; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--light { border: 1px solid rgba(255,255,255,0.4); color: #fff; }
.btn--light:hover { background: #fff; color: var(--navy); }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid var(--hairline); padding-bottom: 3px;
  transition: gap 0.3s var(--ease), color 0.3s;
}
.link-arrow:hover { gap: 0.85em; color: var(--orange); border-color: var(--orange); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.4rem 0; transition: background 0.5s var(--ease), padding 0.5s var(--ease), box-shadow 0.5s;
}
.site-header.scrolled { background: rgba(249,248,245,0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 0.85rem 0; box-shadow: 0 1px 0 var(--hairline-soft); }

/* The blur above establishes a containing block for fixed-position descendants
   (backdrop-filter does this, exactly as transform and filter do). On mobile
   .nav-links is position:fixed *inside* this header, so once .scrolled lands the
   panel resolves against the header box rather than the viewport and collapses
   to header height, leaving only the first menu item visible. The background is
   92% opaque and reads fine unblurred at these sizes, so drop the blur below the
   mobile breakpoint. */
@media (max-width: 920px) {
  .site-header.scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; position: relative; flex-shrink: 0; }
.brand::before {
  content: ''; position: absolute; top: -10px; bottom: -10px; left: -50px; right: -14px;
  background: rgba(249,248,245,0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 6px;
  opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; z-index: 0;
}
.site-header.hero-light .brand::before, .site-header.brand-scrim .brand::before { opacity: 1; }
.site-header.hero-light.scrolled .brand::before, .site-header.brand-scrim.scrolled .brand::before { opacity: 0; }
.brand__logo { display: block; height: 70px; width: auto; max-width: none; aspect-ratio: 212 / 108; flex-shrink: 0; transition: height 0.5s var(--ease); position: relative; z-index: 2; }
.site-header .brand__logo { margin-left: clamp(-36px, calc(-3.5vw - 1px), -14px); }
.site-header.scrolled .brand__logo { height: 58px; }
@media (max-width: 600px){ .brand__logo { height: 50px; } }

.nav-links { display: flex; align-items: center; gap: 2.2rem; }
.nav-links a {
  font-size: 0.83rem; font-weight: 500; letter-spacing: 0.03em; color: var(--navy);
  position: relative; padding: 4px 0; transition: color 0.3s;
}
.site-header.hero-light .nav-links a { color: rgba(255,255,255,0.9); }
.site-header.hero-light.scrolled .nav-links a { color: var(--navy); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--orange); transition: width 0.35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active:not(.nav-cta) { color: var(--orange); }
.site-header.hero-light .nav-links a.active:not(.nav-cta) { color: var(--orange-soft); }
.nav-cta.active, .nav-links a.nav-cta.active { color: #fff; }
.nav-links a.nav-cta, .site-header.hero-light .nav-links a.nav-cta, .site-header.scrolled .nav-links a.nav-cta { color: #fff; }
.nav-cta::after { display: none !important; }

.nav-cta { padding: 0.8rem 1.7rem !important; font-size: 0.8rem; white-space: nowrap; line-height: 1.3; flex-shrink: 0; width: auto; }

/* Nav dropdown (About / Services hover menus) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: 0 16px 36px -12px rgba(14,35,65,0.2);
  padding: 0.5rem 0; min-width: 220px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 150;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block; padding: 0.6rem 1.3rem; font-size: 0.82rem; font-weight: 500;
  color: var(--charcoal) !important; white-space: nowrap; letter-spacing: 0.01em;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--warmgrey); color: var(--navy) !important; }
@media (max-width: 920px){
  .nav-item { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: none; box-shadow: none; padding: 0.4rem 0 0 1rem;
    min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.4rem;
  }
  /* Desktop hover/focus rules leak here with higher specificity: the
     translateX(-50%) shifts the submenu out of the panel and the warmgrey
     hover paints a white pill. Neutralise both on mobile. */
  .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { transform: none; }
  .nav-dropdown a { padding: 0; font-size: 0.95rem; color: rgba(255,255,255,0.75) !important; font-family: var(--sans); white-space: normal; }
  .nav-dropdown a:hover, .nav-dropdown a:focus { background: transparent; color: var(--orange-soft) !important; }
}
.btn { white-space: nowrap; line-height: 1.2; text-align: center; box-sizing: border-box; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; }
.nav-toggle span { height: 1.5px; width: 100%; background: var(--navy); transition: 0.4s var(--ease); transform-origin: center; }
.site-header.hero-light .nav-toggle span { background: #fff; }
.site-header.hero-light.scrolled .nav-toggle span { background: var(--navy); }

@media (max-width: 920px){
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 360px);
    background: var(--navy); flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 1.4rem;
    padding: calc(var(--header-h, 72px) + 1.6rem) var(--gutter) calc(var(--gutter) + 1.2rem);
    transform: translateX(100%); transition: transform 0.5s var(--ease); z-index: 99;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a, .site-header.hero-light .nav-links a { color: rgba(255,255,255,0.92); font-size: 1.12rem; font-family: var(--display); }
  .nav-links > a, .nav-item > a { width: 100%; }
  .nav-cta { margin-top: 1rem; align-self: stretch; }
  .nav-open .nav-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); background:#fff;}
  .nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); background:#fff;}
  /* keep body from scrolling behind the open panel */
  body.nav-open { overflow: hidden; }
  /* the sliding underline is a desktop affordance; in the vertical panel it
     spans the full width and reads as a line pushing off the edge — disable it
     and use a colour shift on tap/active instead. */
  .nav-links a::after { display: none !important; }
  .nav-links a:hover, .nav-links a:focus, .nav-links a.active:not(.nav-cta) { color: var(--orange-soft); }
  .nav-links a { max-width: 100%; overflow-wrap: break-word; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,35,65,0.45) 0%, rgba(14,35,65,0.15) 35%, rgba(14,35,65,0.55) 100%);
}
.hero__inner { position: relative; z-index: 2; color: #fff; max-width: 60ch; padding-block: 8rem; }
.hero__inner .eyebrow { color: var(--orange-soft); }
.hero h1 { color: #fff; margin: 1.2rem 0 1.6rem; }
.hero p { color: rgba(255,255,255,0.88); font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 50ch; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; }
.hero__scroll {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,0.7); font-size: 0.65rem; letter-spacing: 0.25em;
  text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero__scroll .line { width: 1px; height: 46px; background: rgba(255,255,255,0.45); position: relative; overflow: hidden; }
.hero__scroll .line::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--orange-soft); animation: scrolldown 2.2s var(--ease) infinite; }
@keyframes scrolldown { 0%{top:-100%} 60%,100%{top:100%} }

/* page hero (interior) */
.page-hero { padding-top: 11rem; padding-bottom: clamp(3rem, 6vw, 5rem); position: relative; }
/* Approach hero with background image */
.approach-hero { position: relative; min-height: 78vh; min-height: 78dvh; display: flex; align-items: flex-end; overflow: hidden; }
.approach-hero__media { position: absolute; inset: 0; z-index: 0; }
.approach-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.approach-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,35,65,0.55) 0%, rgba(14,35,65,0.35) 45%, rgba(14,35,65,0.85) 100%); }
.approach-hero__inner { position: relative; z-index: 1; padding-bottom: clamp(3rem,7vw,6rem); padding-top: 9rem; }
.approach-hero__inner .breadcrumb a:hover { color: #fff; }
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1 { margin-bottom: 1.2rem; }
.breadcrumb { font-size: 0.78rem; letter-spacing: 0.05em; color: var(--ink-50); margin-bottom: 2rem; }
.breadcrumb a:hover { color: var(--orange); }

/* ==========================================================================
   STATS / COUNTERS
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem,3vw,3rem); }
@media (max-width: 760px){ .stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; } }
.stat { text-align: center; position: relative; }
.stat__num { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 500; color: var(--navy); line-height: 1; }
.stat__num .unit { color: var(--orange); }
.stat__label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-50); margin-top: 0.9rem; }

/* ==========================================================================
   PRINCIPLE CARDS
   ========================================================================== */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (max-width: 900px){ .principles { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .principles { grid-template-columns: 1fr; } }
.principle {
  background: var(--offwhite); padding: 2.6rem 2rem; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden; transition: background 0.5s var(--ease);
}
.principle__no { font-family: var(--display); font-size: 0.95rem; color: var(--orange); position: absolute; top: 2rem; left: 2rem; }
.principle__icon { position: absolute; top: 1.7rem; right: 2rem; width: 52px; color: var(--navy); opacity: 0.55; transition: color 0.4s, opacity 0.4s; }
.principle__icon svg { width: 100%; height: auto; }
.principle:hover .principle__icon { color: var(--orange-soft); opacity: 1; }
.principle h3 { font-size: 1.6rem; margin-bottom: 0.5rem; transition: color 0.4s; }
.principle__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease), opacity 0.5s; color: var(--ink-70); font-size: 0.95rem; }
.principle:hover { background: var(--navy); }
.principle:hover .principle__no { color: var(--orange-soft); }
.principle:hover h3 { color: #fff; }
.principle:hover .principle__body { max-height: 200px; opacity: 1; margin-top: 0.8rem; color: rgba(255,255,255,0.82); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (max-width: 900px){ .services-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .services-grid { grid-template-columns: 1fr;} }
.service-card { background: var(--paper); padding: 2.6rem 2.2rem; transition: background 0.4s var(--ease); display: block; position: relative; }
.service-card:hover { background: var(--warmgrey); }
.service-card__icon { color: var(--orange); margin-bottom: 1.4rem; }
.service-card__icon svg { width: 30px; height: 30px; }
.service-card__icon .icon-img { width: 42px; height: auto; display: block; }
.service-card h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.service-card p { font-size: 0.92rem; color: var(--ink-70); margin-bottom: 1.4rem; }
.service-card .more { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); font-weight: 600; display: inline-flex; gap: 0.5em; align-items: center; transition: gap 0.3s, color 0.3s; }
.service-card:hover .more { gap: 0.85em; color: var(--orange); }

/* ==========================================================================
   PHILOSOPHY / ORBIT
   ========================================================================== */
.philosophy { position: relative; overflow: hidden; }
.orbit-wrap { display: flex; justify-content: center; }
.orbit { width: min(100%, 540px); height: auto; }
.orbit-stage { fill: none; }
.orbit .planet { transition: r 0.4s; }
.flow-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 2.5rem; }
@media(max-width:700px){ .flow-steps{ grid-template-columns: repeat(2,1fr);} }
.flow-step { text-align: center; }
.flow-step h4 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.flow-step p { font-size: 0.82rem; color: var(--ink-50); }
.flow-step .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin: 0 auto 1rem; }

/* ==========================================================================
   APPROACH TIMELINE / HORIZONTAL FLOW
   ========================================================================== */
.flowline { position: relative; margin-top: 4rem; }
.flowline__track { position: absolute; top: 30px; left: 5%; right: 5%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange) 15%, var(--orange) 85%, transparent); opacity: 0.5; }
.flowline__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; }
@media(max-width:760px){ .flowline__track{display:none;} .flowline__steps{grid-template-columns:1fr; gap:2.5rem;} }
.flowstep { text-align: center; }
.flowstep .node { width: 60px; height: 60px; border-radius: 50%; background: var(--paper); border: 2px solid var(--orange); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.4rem; font-family: var(--display); font-size: 1.3rem; color: var(--navy); position: relative; z-index: 2; transition: all 0.4s var(--ease); }
.flowstep:hover .node { background: var(--orange); color: #fff; transform: scale(1.08); }
.flowstep h4 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.flowstep p { font-size: 0.88rem; color: var(--ink-70); max-width: 26ch; margin-inline: auto; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial { position: relative; }
.quote-mark { font-family: var(--display); font-size: 5rem; line-height: 0.5; color: var(--orange); opacity: 0.9; height: 0.5em; display: block; margin-bottom: 0.5rem; }
.testimonial__track { position: relative; min-height: 380px; }
.testimonial__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease); pointer-events: none; }
.testimonial__slide.active { opacity: 1; pointer-events: auto; position: relative; }
.testimonial__card { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: clamp(1.8rem,3vw,3rem); }
@media (max-width: 760px){ .testimonial__card { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; } }
.testimonial__photo { aspect-ratio: 5/6; border-radius: 4px; overflow: hidden; background: var(--midnight); }
.testimonial__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px){ .testimonial__photo { max-width: 220px; margin-inline: auto; } }
.testimonial blockquote { font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.45; color: #fff; font-weight: 400; margin-bottom: 1.6rem; font-style: italic; }
.testimonial__author { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 760px){ .testimonial__author { justify-content: center; } }
.testimonial__author .meta strong { display: block; font-family: var(--sans); font-size: 1rem; color: #fff; font-style: normal; margin-bottom: 0.2rem; }
.testimonial__author .meta span { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.7); line-height: 1.4; }
.testimonial__author .meta .since { color: var(--orange-soft); font-size: 0.76rem; margin-top: 0.3rem; font-style: italic; }
.testimonial__dots { display: flex; gap: 0.6rem; margin-top: 2.4rem; justify-content: center; }
.testimonial__dots button { width: 30px; height: 2px; background: rgba(255,255,255,0.25); transition: background 0.3s; }
.testimonial__dots button.active { background: var(--orange); }

/* ==========================================================================
   INSIGHTS / EDITORIAL CARDS
   ========================================================================== */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media(max-width:900px){ .insights-grid{ grid-template-columns: repeat(2,1fr);} }
@media(max-width:600px){ .insights-grid{ grid-template-columns: 1fr;} }
.insight-card { display: block; group: card; }
.insight-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--warmgrey); margin-bottom: 1.3rem; }
.insight-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.insight-card:hover .insight-card__img img { transform: scale(1.05); }
.insight-card .tag { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); font-weight: 600; }
.insight-card h3 { font-size: 1.35rem; margin: 0.6rem 0; line-height: 1.2; transition: color 0.3s; }
.insight-card:hover h3 { color: var(--orange); }
.insight-card .date { font-size: 0.78rem; color: var(--ink-50); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band blockquote { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.18; max-width: 22ch; margin-bottom: 2.2rem; color: #fff; font-weight: 500; }
.cta-band .glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(245,130,32,0.25), transparent 65%); top: -200px; right: -150px; z-index: 1; filter: blur(20px); }

/* ==========================================================================
   TIMELINE (about)
   ========================================================================== */
.timeline { position: relative; }
.timeline__row { display: grid; grid-template-columns: 130px 1fr; gap: 2.5rem; padding-block: 2.2rem; border-top: 1px solid var(--hairline); position: relative; }
.timeline__row:last-child { border-bottom: 1px solid var(--hairline); }
@media(max-width:600px){ .timeline__row{ grid-template-columns: 80px 1fr; gap:1.5rem;} }
.timeline__year { font-family: var(--display); font-size: 1.8rem; color: var(--orange); font-weight: 500; }
.timeline__row h4 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.timeline__row p { font-size: 0.92rem; color: var(--ink-70); max-width: 60ch; }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,2.5rem); }
@media(max-width:880px){ .team-grid{ grid-template-columns: repeat(2,1fr);} }
@media(max-width:540px){ .team-grid{ grid-template-columns: 1fr;} }
.team-card { text-align: center; }
.team-card__img { aspect-ratio: 4/5; width: 100%; margin: 0 auto 1.2rem; background: var(--warmgrey); overflow: hidden; position: relative; border-radius: 4px; }
.team-card__img::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(14,35,65,0.35)); opacity:0; transition: opacity 0.4s; }
.team-card:hover .team-card__img::after { opacity:1; }
/* Images are pre-cropped to a uniform 4:5 with consistent headroom & face size */
.team-card__img img { width:100%; height:100%; object-fit: cover; object-position: center; transition: transform 0.6s var(--ease); }
.team-card:hover .team-card__img img { transform: scale(1.04); }
.team-card h3 { font-size: 1.4rem; }
.team-card .role { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin: 0.3rem 0 0; }

/* ==========================================================================
   LEADERSHIP — profile cards (same visual language as Mentors, plus a bio).
   Five profiles in a centred 3 + 2 grid.
   ========================================================================== */
.lead-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.8rem,3vw,3rem) clamp(1.5rem,3vw,2.5rem);
  max-width: 1100px; margin-inline: auto;
}
/* row 1: three cards, each spanning two of the six columns */
.lead-grid .lead-card:nth-child(1) { grid-column: 1 / 3; }
.lead-grid .lead-card:nth-child(2) { grid-column: 3 / 5; }
.lead-grid .lead-card:nth-child(3) { grid-column: 5 / 7; }
/* row 2: two cards, shifted one column in so they sit centred between the top three */
.lead-grid .lead-card:nth-child(4) { grid-column: 2 / 4; }
.lead-grid .lead-card:nth-child(5) { grid-column: 4 / 6; }

.lead-card { text-align: center; }
.lead-card__img {
  aspect-ratio: 4/5; width: 100%; margin: 0 auto 1.2rem;
  background: var(--warmgrey); overflow: hidden; position: relative; border-radius: 4px;
}
.lead-card__img::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(14,35,65,0.35));
  opacity:0; transition: opacity 0.4s;
}
.lead-card:hover .lead-card__img::after { opacity:1; }
.lead-card__img img { width:100%; height:100%; object-fit: cover; object-position: center; transition: transform 0.6s var(--ease); }
.lead-card:hover .lead-card__img img { transform: scale(1.04); }
.lead-card__name { font-size: 1.4rem; margin: 0; color: var(--navy); }
.lead-card__role { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin: 0.3rem 0 0.85rem; }
.lead-card__bio  { color: var(--ink-70); font-size: 0.92rem; line-height: 1.62; font-weight: 300; max-width: 34ch; margin-inline: auto; }

@media (max-width: 880px){
  .lead-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  /* reset the 3+2 six-column placement so the 2-col flow is natural */
  .lead-grid .lead-card:nth-child(1),
  .lead-grid .lead-card:nth-child(2),
  .lead-grid .lead-card:nth-child(3),
  .lead-grid .lead-card:nth-child(4),
  .lead-grid .lead-card:nth-child(5) { grid-column: auto; justify-self: stretch; max-width: none; width: 100%; }
}
@media (max-width: 540px){
  .lead-grid { grid-template-columns: 1fr; max-width: 360px; }
}

/* Team grid: 5 members fit evenly; Mentors grid: all 4 on one line, smaller photos */
#teamGrid { grid-template-columns: repeat(5, 1fr); }
#teamGrid .team-card__img { width: 100%; }
#mentorGrid { grid-template-columns: repeat(4, 1fr); }
#mentorGrid .team-card__img { width: 100%; }
#mentorGrid .team-card h3 { font-size: 1.2rem; }
#mentorGrid .team-card .role { font-size: 0.68rem; }
@media (max-width: 880px) {
  #teamGrid   { grid-template-columns: repeat(3, 1fr); }
  #mentorGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  #teamGrid   { grid-template-columns: repeat(2, 1fr); }
  #mentorGrid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ACCORDION (code of practice)
   ========================================================================== */
.accordion__item { border-top: 1px solid var(--hairline); }
.accordion__item:last-child { border-bottom: 1px solid var(--hairline); }
.accordion__head { width: 100%; text-align: left; padding: 1.6rem 0; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.accordion__head h4 { font-size: clamp(1.2rem, 2vw, 1.6rem); transition: color 0.3s; }
.accordion__item.open .accordion__head h4 { color: var(--orange); }
.accordion__icon { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.accordion__icon::before, .accordion__icon::after { content:''; position:absolute; background: var(--orange); transition: transform 0.4s var(--ease); }
.accordion__icon::before { top:50%; left:0; right:0; height:1.5px; transform: translateY(-50%); }
.accordion__icon::after  { left:50%; top:0; bottom:0; width:1.5px; transform: translateX(-50%); }
.accordion__item.open .accordion__icon::after { transform: translateX(-50%) scaleY(0); }
.accordion__body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.accordion__body-inner { padding: 0 0 1.8rem; color: var(--ink-70); max-width: 62ch; font-size: 0.95rem; }

/* ==========================================================================
   APPROACH STEPS (detail)
   ========================================================================== */
.approach-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items: center; padding-block: clamp(3rem,6vw,5rem); border-top: 1px solid var(--hairline); scroll-margin-top: 100px; }
a.flowstep { text-decoration: none; color: inherit; cursor: pointer; }
a.flowstep:hover .node { background: var(--orange); color: #fff; transform: scale(1.08); }
a.flowstep:hover h4 { color: var(--orange); }
/* New approach stage visuals */
.appr-svg { width: 100%; max-width: 360px; height: auto; display: block; margin-inline: auto; }
.tetris-svg { transition: transform 0.5s var(--ease); transform-origin: center bottom; }
.approach-row__visual:hover .tetris-svg { transform: translateY(-3px); }
.align-quotes { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.align-quotes__row { display: flex; align-items: center; gap: 1.1rem; }
.align-quotes__mark { font-family: var(--display); font-size: clamp(6rem, 11vw, 9.5rem); line-height: 0.7; font-weight: 600; transition: transform 0.4s var(--ease); }
.align-quotes__mark--open { color: var(--navy); }
.align-quotes__mark--close { color: var(--orange); }
.approach-row__visual:hover .align-quotes__mark--open { transform: translateX(-4px); }
.approach-row__visual:hover .align-quotes__mark--close { transform: translateX(4px); }
.align-quotes__rule { width: 70px; height: 2px; background: var(--hairline); }
.puz { transition: transform 0.5s var(--ease); }
.align-svg .align-line { transition: opacity 0.4s var(--ease); }
.approach-row__visual:hover .align-understand .align-line { opacity: 0.85; }
.evolve-svg ellipse { transition: opacity 0.4s var(--ease); }
.approach-row:nth-child(even) .approach-row__visual { order: -1; }
@media(max-width:820px){ .approach-row{ grid-template-columns: 1fr; gap: 2rem;} .approach-row:nth-child(even) .approach-row__visual{ order:0;} }
.approach-row__num { font-family: var(--display); font-size: 1rem; color: var(--orange); letter-spacing: 0.1em; }
.approach-row h3 { font-size: clamp(1.8rem,3vw,2.6rem); margin: 0.6rem 0 1rem; }
.approach-row p { color: var(--ink-70); max-width: 48ch; }
.approach-row__visual { background: var(--warmgrey); border-radius: 4px; padding: clamp(1.5rem,3vw,3rem); display:flex; align-items:center; justify-content:center; }
.approach-row__visual svg { width: 100%; height: auto; max-width: 360px; }

/* ==========================================================================
   FORM
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.8rem; }
@media(max-width:640px){ .form-grid{ grid-template-columns: 1fr;} }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 0.6rem; }
.field input, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--charcoal);
  background: transparent; border: none; border-bottom: 1px solid var(--hairline);
  padding: 0.7rem 0; transition: border-color 0.3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.field textarea { resize: vertical; min-height: 90px; }
.form-note { font-size: 0.78rem; color: var(--ink-50); margin-top: 1.5rem; }
.form-success { display:none; background: var(--warmgrey); border-left: 3px solid var(--orange); padding: 1.5rem 1.8rem; margin-top: 1.5rem; }
.form-success.show { display: block; }

/* ==========================================================================
   INSIGHTS FILTER / SEARCH
   ========================================================================== */
.insights-tools { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { font-size: 0.78rem; letter-spacing: 0.04em; padding: 0.5rem 1.1rem; border: 1px solid var(--hairline); border-radius: 40px; color: var(--ink-70); transition: all 0.3s; }
.chip.active, .chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.search-box { display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid var(--hairline); padding-bottom: 0.4rem; }
.search-box input { border: none; background: transparent; font-family: var(--sans); font-size: 1rem; outline: none; width: 180px; }
.search-box svg { color: var(--ink-50); }
.insight-card.hide { display: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.75); padding-block: clamp(4rem,7vw,6rem) 2.5rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media(max-width:820px){ .footer-top{ grid-template-columns: 1fr 1fr;} }
@media(max-width:480px){ .footer-top{ grid-template-columns: 1fr;} }
.footer-brand .brand__logo { background: #fff; padding: 7px 12px; border-radius: 6px; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .footer-tagline { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--orange-soft); margin-top: 0.6rem; }
.footer-brand p { font-size: 0.9rem; max-width: 34ch; margin-top: 1.2rem; line-height: 1.6; }
.footer-col h5 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1.2rem; }
.footer-col a { display: block; font-size: 0.9rem; padding: 0.35rem 0; color: rgba(255,255,255,0.78); transition: color 0.3s; }
.footer-col a:hover { color: var(--orange-soft); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2.5rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.footer-disclaimer { font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.6; max-width: 100%; margin-top: 1rem; }
.footer-disclaimer a { color: rgba(255,255,255,0.6); text-decoration: underline; }
.footer-disclaimer a:hover { color: var(--orange-soft); }
.footer-compliance { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.12); }
.footer-reg { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-bottom: 1rem; }
.footer-reg strong { color: rgba(255,255,255,0.9); }

/* ==========================================================================
   IMAGE BAND
   ========================================================================== */
.image-band { position: relative; height: clamp(340px, 50vh, 560px); overflow: hidden; }
.image-band img { width: 100%; height: 100%; object-fit: cover; }
.image-band__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-block: clamp(2rem,5vw,4rem);
  background: linear-gradient(180deg, rgba(14,35,65,0.15), rgba(14,35,65,0.65)); }
.image-band__overlay .display-s { font-family: var(--display); font-weight: 500; }

/* ==========================================================================
   CODE OF PRACTICE (values)
   ========================================================================== */
.practice { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem; max-width: 1000px; margin-inline: auto; }
.practice__item { border-top: 1px solid var(--hairline); padding: 1.8rem 0; }
.practice__head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.7rem; }
.practice__no { font-family: var(--display); font-size: 1rem; color: var(--orange); letter-spacing: 0.05em; }
.practice__item h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); transition: color 0.3s; }
.practice__item:hover h3 { color: var(--orange); }
.practice__item p { color: var(--ink-70); font-size: 0.95rem; line-height: 1.65; }
.practice__sep { display: none; }
@media (max-width: 680px){ .practice { grid-template-columns: 1fr; } }

/* ==========================================================================
   INTERACTIVE: WEALTH BEHAVIOURS WHEEL
   ========================================================================== */
.wheel-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 860px){ .wheel-wrap { grid-template-columns: 1fr; } }
.wheel { width: min(100%, 480px); margin-inline: auto; display: block; }
.wheel .seg { cursor: pointer; transition: opacity 0.3s; }
.wheel .seg path { fill: var(--warmgrey); stroke: #fff; stroke-width: 2; transition: fill 0.35s var(--ease); }
.wheel .seg:hover path, .wheel .seg.active path { fill: var(--orange); }
.wheel .seg text { fill: var(--navy); font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; pointer-events: none; transition: fill 0.3s; }
.wheel .seg:hover text, .wheel .seg.active text { fill: #fff; }
.wheel__hub { fill: var(--navy); }
.wheel__hub-text { fill: #fff; font-family: var(--display); font-size: 13px; text-anchor: middle; pointer-events: none; }
.wheel-detail { min-height: 180px; }
.wheel-detail .eyebrow { color: var(--orange); }
.wheel-detail h3 { font-size: clamp(1.6rem,3vw,2.4rem); margin: 0.5rem 0 0.8rem; }
.wheel-detail p { color: var(--ink-70); font-size: 1.02rem; line-height: 1.6; max-width: 42ch; }
.wheel-detail__panel { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.wheel-detail__panel.show { opacity: 1; transform: none; }

/* ==========================================================================
   INTERACTIVE: FAMILY WEALTH JOURNEY (horizontal snake)
   ========================================================================== */
.snake { position: relative; margin: 8rem auto; max-width: 1100px; min-height: 360px; }
.snake__svg { width: 100%; height: auto; display: block; overflow: visible; }
.snake__progress { stroke-dasharray: 1; stroke-dashoffset: 1; }
.snake__nodes circle { fill: var(--paper); stroke: var(--hairline); stroke-width: 2; transition: fill 0.4s var(--ease), stroke 0.4s var(--ease), r 0.4s var(--ease); }
.snake__nodes circle.lit { fill: var(--orange); stroke: var(--orange); }
.snake__card { position: absolute; width: 190px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); text-align: center; }
.snake__card { margin-top: -120px; }           /* cards on the upper nodes sit above the path */
.snake__card--below { margin-top: 120px; }      /* lower nodes sit below the path */
.snake__card.in { opacity: 1; }
.snake__age { font-family: var(--display); font-size: 1.5rem; color: var(--navy); }
.snake__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); font-weight: 600; margin: 0.2rem 0 0.5rem; }
.snake__card p { font-size: 0.82rem; color: var(--ink-70); line-height: 1.5; }
/* Mobile: stack vertically, hide the snake svg */
@media (max-width: 720px){
  .snake__svg { display: none; }
  .snake { display: flex; flex-direction: column; gap: 2rem; }
  .snake__card { position: static; transform: none; width: 100%; max-width: 420px; margin: 0 auto !important;
    text-align: left; border-left: 2px solid var(--orange); padding-left: 1.2rem; opacity: 0; }
  .snake__card.in { opacity: 1; }
}

/* ==========================================================================
   VENN — EXPERTS + PARTNERS (about)
   ========================================================================== */
.venn { position: relative; width: min(100%, 620px); margin: 0 auto; aspect-ratio: 1.5 / 1; margin-bottom: 4.5rem; }
.venn__circle { position: absolute; top: 8%; width: 60%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.venn__circle--experts { left: 0; background: var(--navy); color: #fff; z-index: 2; }
.venn__circle--partners { right: 0; background: var(--warmgrey); color: var(--navy); z-index: 1; }
.venn__label { text-align: center; padding: 1rem; transform: translateX(-22%); }
.venn__circle--partners .venn__label { transform: translateX(22%); }
.venn__label h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.3rem; color: inherit; }
.venn__circle--experts .venn__label h3 { color: #fff; }
.venn__circle--partners .venn__label h3 { color: var(--orange); }
.venn__label p { font-size: 0.9rem; opacity: 0.85; }
.venn__circle--experts .venn__label p { color: rgba(255,255,255,0.8); }
/* Highlighted intersection: a copy of the experts circle, clipped down to only the
   area it shares with the partners circle, so the overlap reads as a distinct lens. */
.venn__core { position: absolute; top: 8%; left: 0; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px rgba(249,248,245,0.9);
  -webkit-clip-path: circle(50% at 116.7% 50%); clip-path: circle(50% at 116.7% 50%); z-index: 3; pointer-events: none; }
/* Arrow: sibling of the core (not nested, since clip-path on the core would clip it away),
   sharing the same box geometry so it still starts visually from the highlighted intersection */
.venn__arrow-wrap { position: absolute; top: 0; left: 50%; width: 30px; height: 98%; transform: translateX(-50%); z-index: 4; pointer-events: none; }
.venn__arrow { position: absolute; top: 100%; left: 50%; width: 30px; height: 3.5rem; transform: translateX(-50%); }
.venn__arrow svg { width: 100%; height: 100%; }
.venn__caption { position: absolute; bottom: -6.4rem; left: 0; right: 0; text-align: center; font-family: var(--display); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem); color: #B08D57; }
@media (max-width: 520px){
  .venn { aspect-ratio: 1 / 1.5; }
  .venn__circle { width: 68%; }
  .venn__circle--experts { top: 0; left: 50%; transform: translateX(-50%); }
  .venn__circle--partners { top: 45%; right: auto; left: 50%; transform: translateX(-50%); }
  .venn__label, .venn__circle--partners .venn__label { transform: none; }
  .venn__core { display: none; }
  .venn__arrow-wrap { display: none; }
  .venn__caption { bottom: -3.4rem; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1; transform:none; transition:none; }
  *,*::before,*::after { animation: none !important; }
}

/* utility */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.divider { width: 60px; height: 2px; background: var(--orange); margin: 1.6rem 0; }
.divider.center { margin-inline: auto; }

/* ==========================================================================
   IDENTITY CTA (homepage — centered "Our Story" button after copy removal)
   ========================================================================== */
.identity-cta { text-align: center; max-width: 950px; margin-inline: auto; }
.identity-cta__lead { font-size: 1.08rem; line-height: 1.85; color: var(--ink-70); margin-bottom: 1.5rem; }
.identity-cta .btn { font-size: 1.02rem; padding: 1.2rem 2.8rem; }

/* ==========================================================================
   TESTIMONIAL PREVIEW (homepage — single quote with image, placeholder-ready)
   ========================================================================== */
.testimonial-preview { display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.testimonial-preview--reverse { grid-template-columns: 1fr 340px; }
.testimonial-preview--reverse .testimonial-preview__left { order: 2; }
.testimonial-preview__media { aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--warmgrey); }
.testimonial-preview__media img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-preview__name { font-family: var(--display); font-size: 1.3rem; color: var(--navy); margin-top: 1.1rem; }
.testimonial-preview__sub { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); margin-top: 0.25rem; }
.testimonial-preview__quote { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem,1.8vw,1.4rem); line-height: 1.6; color: #3a3a3a; }
.testimonial-preview--navy { max-width: 880px; margin-inline: auto; }
.testimonial-preview--navy .testimonial-preview__name { color: #fff; }
.testimonial-preview--navy .testimonial-preview__sub { color: rgba(255,255,255,0.55); }
.testimonial-preview--navy .testimonial-preview__quote { color: rgba(255,255,255,0.88); }

/* Left column aligns to top so name sits under the photo cleanly */
.testimonial-preview { align-items: start; }
.testimonial-preview__left { align-self: start; }
.testimonial-preview__body { align-self: center; }
/* Quote sizing tuned so long and short testimonials both read well */
.testimonial-preview__quote { font-size: clamp(1rem,1.5vw,1.2rem); }
/* "Esteemed client since…" footer under the quote */
.testimonial-preview__since {
  margin-top: 1.1rem; font-family: var(--display); font-style: italic;
  font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.6);
}
/* No-photo testimonials: single centred column, no empty media gap */
.testimonial-preview--noimg { grid-template-columns: 1fr; gap: 1.4rem; max-width: 760px; text-align: center; }
.testimonial-preview--noimg .testimonial-preview__name { margin-top: 0; }
.testimonial-preview--noimg .testimonial-preview__since { text-align: center; }
/* Reduce height jump between slides of differing length */
.testimonial-slider__track { min-height: 320px; display: flex; align-items: center; }
.testimonial-slide { width: 100%; }

/* Testimonial slideshow */
.testimonial-slider { position: relative; }
.testimonial-slider__track { position: relative; }
.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: block; animation: testimonialFade 0.5s var(--ease); }
@keyframes testimonialFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.testimonial-slider__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.testimonial-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.testimonial-arrow svg { width: 20px; height: 20px; }
.testimonial-arrow:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (max-width: 780px){
  .testimonial-slider__nav { margin-top: 1.8rem; }
}
@media (max-width: 780px){
  .testimonial-preview, .testimonial-preview--reverse { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; }
  .testimonial-preview--reverse .testimonial-preview__left { order: 0; }
  .testimonial-preview__left { align-self: center; }
  .testimonial-preview__media { width: 150px; aspect-ratio: 1/1; border-radius: 50%; margin-inline: auto; }
  .testimonial-preview__name { margin-top: 0.9rem; }
  .testimonial-slider__track { min-height: 0; }
}

/* ==========================================================================
   SERVICES NAV DECK (services page — card navigation with hover reveal)
   ========================================================================== */
.services-nav-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px){ .services-nav-deck { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .services-nav-deck { grid-template-columns: 1fr; } }
.nav-deck-card {
  position: relative; display: block; background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 2.2rem 1.8rem; text-align: left;
  opacity: 0; transform: translateY(26px) scale(0.94);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav-deck-card.in { opacity: 1; transform: translateY(0) scale(1); }
.nav-deck-card__icon { color: var(--orange); margin-bottom: 1.2rem; transition: color 0.4s; }
.nav-deck-card__icon svg { width: 28px; height: 28px; }
.nav-deck-card__icon .icon-img { width: 40px; height: auto; display: block; }
.nav-deck-card h3 { font-size: 1.22rem; color: var(--navy); transition: color 0.4s; margin: 0; }
.nav-deck-card__reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease); }
.nav-deck-card__reveal p { font-size: 0.85rem; font-style: italic; font-family: var(--display); color: rgba(255,255,255,0.85); margin: 1rem 0 1rem; line-height: 1.5; }
.nav-deck-card__reveal .more { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-soft); font-weight: 600; display: inline-flex; gap: 0.5em; align-items: center; }
.nav-deck-card:hover, .nav-deck-card:focus-within { background: var(--navy); border-color: var(--navy); }
.nav-deck-card:hover h3, .nav-deck-card:focus-within h3 { color: #fff; }
.nav-deck-card:hover .nav-deck-card__icon, .nav-deck-card:focus-within .nav-deck-card__icon { color: var(--orange-soft); }
.nav-deck-card:hover .nav-deck-card__reveal, .nav-deck-card:focus-within .nav-deck-card__reveal { max-height: 160px; opacity: 1; }

/* Light spacer to separate stacked navy sections */
.section-gap { height: clamp(3rem, 6vw, 5rem); background: var(--offwhite); }

/* ==========================================================================
   MOBILE NAV PANEL — corrections
   ========================================================================== */
@media (max-width: 920px) {

  /* Link colour inside the slide-out panel.
     .site-header.hero-light.scrolled .nav-links a scores 0,4,1 and outranks the
     mobile rule further up (0,3,1); media queries contribute no specificity of
     their own. The result on the home page once scrolled is navy text on the
     navy panel, so "Our Approach", "About" and "Services" disappear while the
     .active item, the !important dropdown children and the CTA button survive.
     Match the specificity here to put them back. */
  .site-header.hero-light.scrolled .nav-links a,
  .site-header.brand-scrim.scrolled .nav-links a {
    color: rgba(255, 255, 255, 0.92);
  }

  .site-header.hero-light.scrolled .nav-links a:hover,
  .site-header.hero-light.scrolled .nav-links a:focus,
  .site-header.hero-light.scrolled .nav-links a.active:not(.nav-cta),
  .site-header.brand-scrim.scrolled .nav-links a.active:not(.nav-cta) {
    color: var(--orange-soft);
  }

  .site-header.hero-light.scrolled .nav-links a.nav-cta,
  .site-header.brand-scrim.scrolled .nav-links a.nav-cta {
    color: #fff;
  }

  /* Close (X) affordance.
     The burger already animates into an X via .nav-open .nav-toggle span, but
     the panel (z-index 99) paints over it, so there is nothing to tap. Lift the
     button above the panel; its bars are already white when open. */
  .nav-toggle {
    position: relative;
    z-index: 101;
  }
}

/* ==========================================================================
   MOBILE NAV — collapsible submenus
   The panel lists 15 links when every submenu is expanded, which is a lot of
   scrolling. Collapse them behind a chevron instead. The chevron is a separate
   control from the parent link, so "About" and "Services" still navigate to
   their own pages — a tap-to-open parent would strand those two pages.
   ========================================================================== */
@media (max-width: 920px) {

  .nav-item { position: relative; }

  .nav-dropdown {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.4s var(--ease),
                margin-top 0.3s var(--ease),
                padding-top 0.3s var(--ease);
  }

  .nav-item.open > .nav-dropdown {
    max-height: 60vh;
    margin-top: 0.9rem;
    padding-top: 0.1rem;
  }

  .nav-item__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;              /* keeps the tap target at the 44px minimum */
    height: 44px;
    margin-top: -0.7rem;      /* centre it on the parent link's text row */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: transform 0.35s var(--ease), color 0.3s var(--ease);
  }

  .nav-item__toggle svg { width: 15px; height: 15px; }

  .nav-item.open > .nav-item__toggle {
    transform: rotate(180deg);
    color: var(--orange-soft);
  }
}

/* The chevron is a mobile affordance; desktop keeps its hover dropdown. */
@media (min-width: 921px) {
  .nav-item__toggle { display: none; }
}

/* ==========================================================================
   HERO — full-width inner on desktop
   .hero__inner carries both .wrap (max-width 1280px) and its own 60ch cap;
   equal specificity means the 60ch wins, holding the headline to roughly 550px
   and forcing "Empowering your" to wrap early at large display sizes. Release
   it above the mobile breakpoint. Below it the viewport is narrower than 60ch
   anyway, so the cap never bound there.
   ========================================================================== */
@media (min-width: 921px) {
  .hero__inner { max-width: none; }
}

/* ==========================================================================
   SEPTEMBER CONTENT UPDATE
   ========================================================================== */

/* Some testimonials now run to several paragraphs; the quote class carries no
   margin of its own, so consecutive ones would butt together. */
.testimonial-preview__quote + .testimonial-preview__quote { margin-top: 0.9rem; }

/* ==========================================================================
   REGULATORY DISCLOSURES
   Compliance report items 1, 19, 20 and 22.
   ========================================================================== */

/* Item 1 — Source / As-on qualifier beneath the statistics band. */
.stats__source {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-50);
}

/* Items 19 & 20 — statutory panel on the landing page. */
.statutory { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.statutory__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1000px;
  margin-inline: auto;
}
@media (max-width: 780px) { .statutory__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.statutory__col h5 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.1rem;
}

.statutory__col dl {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  gap: 0.55rem 1.2rem;
  margin: 0;
}
@media (max-width: 520px) {
  .statutory__col dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .statutory__col dd { margin-bottom: 0.7rem; }
}

.statutory__col dt {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-50);
  line-height: 1.5;
}
.statutory__col dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--charcoal);
  line-height: 1.5;
}
.statutory__col dd a { color: var(--navy); transition: color .3s var(--ease); }
.statutory__col dd a:hover { color: var(--orange); }

/* Item 22 — social handles. */
.statutory__social { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.statutory__social a,
.footer-social a {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--navy);
  border-bottom: 1px solid var(--hairline);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.statutory__social a:hover { color: var(--orange); border-color: var(--orange); }

.footer-social { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.7rem; }
.footer-social a { color: rgba(255,255,255,0.75); border-bottom-color: rgba(255,255,255,0.25); }
.footer-social a:hover { color: var(--orange-soft); border-bottom-color: var(--orange-soft); }

/* ==========================================================================
   FOOTER — entity & registration details
   Moved out of the landing page so the disclosures carry on every page.
   ========================================================================== */
.footer-statutory {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-top: 2.4rem;
  margin-top: 2.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 780px) { .footer-statutory { grid-template-columns: 1fr; gap: 2rem; } }

.footer-statutory__col h5 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 0.9rem;
}

.footer-statutory__col dl {
  display: grid;
  grid-template-columns: minmax(130px, 40%) 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
@media (max-width: 520px) {
  .footer-statutory__col dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .footer-statutory__col dd { margin-bottom: 0.6rem; }
}

.footer-statutory__col dt {
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.footer-statutory__col dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.footer-statutory__col dd a { color: rgba(255, 255, 255, 0.82); transition: color .3s var(--ease); }
.footer-statutory__col dd a:hover { color: var(--orange-soft); }