* { box-sizing: border-box; }
:root {
  --ink: #1d2927;
  --muted: #68716f;
  --paper: #f7f5f0;
  --accent: #b37700;
  --teal: #9db9b1;
  --line: #d8d8d1;
  --max: 1240px;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max); margin: auto; padding: 24px 32px;
  background: rgba(247,245,240,.92); backdrop-filter: blur(10px);
}
.brand { font-size: 14px; line-height: 1.05; font-weight: 700; letter-spacing: .14em; }
.site-nav { display: flex; gap: 34px; font-size: 14px; }
.site-nav a:hover, .text-link:hover { opacity: .55; }
.menu-toggle { display:none; border:0; background:none; font:inherit; }
.section { max-width: var(--max); margin: auto; padding: 110px 32px; }
.hero {
  min-height: 82vh; display:grid; grid-template-columns: 1.15fr .85fr;
  align-items:center; gap:70px; padding-top:80px;
}
.eyebrow, .section-label { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; color:var(--muted); }
h1, h2, h3 { margin:0 0 24px; line-height:1.08; }
h1 { font-size: clamp(48px, 7vw, 92px); max-width:900px; font-weight:500; }
h1 em { font-family:"Playfair Display", serif; font-weight:500; }
h2 { font-size:clamp(38px, 5vw, 64px); font-weight:500; }
h3 { font-size:26px; font-weight:600; }
.lead { max-width:620px; color:var(--muted); font-size:20px; margin:0 0 36px; }
.button {
  display:inline-flex; gap:28px; align-items:center; padding:15px 20px;
  background:var(--ink); color:white; border:1px solid var(--ink);
  font-size:14px; transition:.2s ease;
}
.button:hover { background:transparent; color:var(--ink); }
.hero-art { min-height:560px; position:relative; }
.shape { position:absolute; }
.shape-one { width:58%; aspect-ratio:1; right:7%; top:4%; background:var(--accent); border-radius:48% 52% 42% 58%; transform:rotate(12deg); }
.shape-two { width:48%; aspect-ratio:1; left:2%; bottom:9%; background:var(--teal); border-radius:48% 52% 60% 40%; }
.shape-three { width:26%; aspect-ratio:1; right:0; bottom:0; background:var(--ink); border-radius:50%; }
.intro { display:grid; grid-template-columns: 1fr 2.5fr; gap:40px; border-top:1px solid var(--line); }
.intro-content { max-width:900px; }
.intro-content p, .section-heading p, .split-copy p, .team p, .contact p { color:var(--muted); font-size:18px; }
.text-link { display:inline-block; margin-top:12px; font-weight:600; }
.services { border-top:1px solid var(--line); }
.section-heading { max-width:760px; margin-bottom:55px; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); }
.service-card { background:var(--paper); min-height:330px; padding:40px; display:flex; flex-direction:column; }
.service-number { font-size:12px; color:var(--muted); margin-bottom:auto; }
.service-card p { color:var(--muted); max-width:520px; margin-top:0; }
.service-card a { margin-top:auto; font-weight:600; }
.split-section { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.split-art { min-height:500px; position:relative; background:#e8e5dd; overflow:hidden; }
.abstract-circle { position:absolute; width:65%; aspect-ratio:1; border-radius:50%; background:var(--teal); top:9%; left:14%; }
.abstract-square { position:absolute; width:35%; aspect-ratio:1; background:var(--accent); right:6%; bottom:7%; transform:rotate(18deg); }
.team { border-top:1px solid var(--line); }
.team-layout, .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.portrait-placeholder { min-height:460px; display:grid; place-items:center; background:#ddd9d0; color:#888; letter-spacing:.15em; }
.contact { background:var(--ink); color:white; max-width:none; padding-left:max(32px, calc((100vw - var(--max))/2 + 32px)); padding-right:max(32px, calc((100vw - var(--max))/2 + 32px)); }
.contact .section-label, .contact p { color:#bac2bf; }
.contact-form { display:grid; gap:20px; }
.contact-form label { font-size:13px; }
input, textarea { width:100%; display:block; margin-top:8px; padding:13px 0; border:0; border-bottom:1px solid #71807b; background:transparent; color:white; font:inherit; outline:none; }
.contact .button { margin-top:8px; justify-self:start; background:white; color:var(--ink); border-color:white; }
.contact .button:hover { background:transparent; color:white; }
.site-footer { max-width:var(--max); margin:auto; padding:35px 32px; display:flex; justify-content:space-between; gap:20px; font-size:12px; color:var(--muted); }

@media (max-width: 800px) {
  .site-header { padding:18px 22px; }
  .menu-toggle { display:block; cursor:pointer; }
  .site-nav { display:none; position:absolute; top:70px; left:0; right:0; padding:20px 22px; flex-direction:column; gap:16px; background:var(--paper); border-bottom:1px solid var(--line); }
  .site-nav.open { display:flex; }
  .section { padding:80px 22px; }
  .hero, .intro, .split-section, .team-layout, .contact-layout { grid-template-columns:1fr; gap:45px; }
  .hero { min-height:auto; padding-top:70px; }
  .hero-art { min-height:380px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:280px; }
  .split-art { min-height:360px; order:2; }
  .site-footer { flex-direction:column; padding:30px 22px; }
}

/* Scroll reveal / motion system */
.reveal, .reveal-left, .reveal-right, .reveal-pop {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal { transform: translateY(42px); }
.reveal-left { transform: translateX(-55px); }
.reveal-right { transform: translateX(55px); }
.reveal-pop { transform: translateY(30px) scale(.88); }
.revealed { opacity: 1; transform: none; }

.hero .hero-copy > * { opacity: 0; transform: translateY(28px); animation: heroIn .85s cubic-bezier(.22,1,.36,1) forwards; }
.hero .hero-copy .eyebrow { animation-delay: .08s; }
.hero .hero-copy h1 { animation-delay: .18s; }
.hero .hero-copy .lead { animation-delay: .30s; }
.hero .hero-copy .button { animation-delay: .42s; }
.hero-art { animation: heroArtIn 1.2s cubic-bezier(.22,1,.36,1) .12s both; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroArtIn { from { opacity: 0; transform: translateY(45px) scale(.94) rotate(-3deg); } to { opacity: 1; transform: none; } }

.shape, .abstract-circle, .abstract-square { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.hero-art:hover .shape-one { transform: rotate(18deg) translate(8px,-8px); }
.hero-art:hover .shape-two { transform: translate(-8px,8px); }
.hero-art:hover .shape-three { transform: translate(5px,-5px); }

.service-card { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 22px 45px rgba(29,41,39,.10); position:relative; z-index:2; }
.service-card:hover .service-number { transform: translateX(7px); }
.service-number { display:inline-block; transition: transform .35s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-pop { opacity: 1; transform:none; }
}

/* Enhanced service cards */
.services { overflow: hidden; }
.service-grid { overflow: visible; background: transparent; gap: 18px; }
.service-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 360px; border: 1px solid var(--line); border-radius: 2px;
  padding: 38px;
  transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease, border-color .4s ease;
}
.service-card::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(circle at 85% 10%, rgba(220,165,161,.28), transparent 34%),
              linear-gradient(135deg, transparent 55%, rgba(157,185,177,.12));
  opacity:0; transform:scale(1.12);
  transition:opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.service-card::after {
  content:""; position:absolute; width:150px; height:150px; right:-75px; top:-75px;
  border:0px solid rgba(29,41,39,.14); border-radius:50%;
  transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.service-card:nth-child(2)::before { background:radial-gradient(circle at 15% 85%, rgba(157,185,177,.30), transparent 36%), linear-gradient(135deg, transparent 55%, rgba(220,165,161,.10)); }
.service-card:nth-child(3)::before { background:radial-gradient(circle at 85% 85%, rgba(157,185,177,.25), transparent 35%), linear-gradient(135deg, rgba(220,165,161,.08), transparent 60%); }
.service-card:nth-child(4)::before { background:radial-gradient(circle at 15% 15%, rgba(220,165,161,.25), transparent 35%), linear-gradient(135deg, transparent 55%, rgba(157,185,177,.12)); }
.service-card:hover { transform:translateY(-14px) rotate(-.4deg); box-shadow:0 28px 60px rgba(29,41,39,.13); border-color:rgba(29,41,39,.28); }
.service-card:hover::before { opacity:1; transform:scale(1); }
.service-card:hover::after { transform:scale(1.7); opacity:.5; }
.service-icon {
  position:absolute; top:31px; right:32px; width:58px; height:58px;
  display:grid; place-items:center; border:1px solid rgba(29,41,39,.16);
  border-radius:50%; font-size:25px;
  transition:transform .65s cubic-bezier(.22,1,.36,1), background .4s ease;
}
.service-card:hover .service-icon { transform:rotate(18deg) scale(1.12); background:rgba(255,255,255,.42); }
.service-card h3 { margin-top:68px; position:relative; z-index:2; }
.service-card p, .service-card a { position:relative; z-index:2; }
.service-card p { transition:transform .45s ease; }
.service-card:hover p { transform:translateY(-2px); }
.service-card a { display:inline-flex; align-items:center; gap:12px; width:fit-content; }
.card-arrow {
  display:inline-grid; place-items:center; width:27px; height:27px;
  border:1px solid currentColor; border-radius:50%; font-size:13px;
  transition:transform .4s ease;
}
.service-card:hover .card-arrow { transform:translate(4px,-4px); }

/* Testimonials */
.testimonials { border-top:1px solid var(--line); overflow:hidden; }
.testimonial-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin:5px 0 55px; }
.testimonial-heading h2 { margin:0; }
.testimonial-heading p { max-width:360px; margin:0 0 5px; color:var(--muted); font-size:17px; }
.testimonial-slider { position:relative; min-height:360px; max-width:980px; margin:auto; }
.testimonial-card {
  position:absolute; inset:0; padding:48px 55px; background:#ebe8e0;
  opacity:0; transform:translateX(55px) scale(.97); pointer-events:none;
  transition:opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.testimonial-card.active { opacity:1; transform:none; pointer-events:auto; }
.quote-mark { font-family:"Playfair Display",serif; font-size:80px; line-height:.65; color:var(--accent); }
.testimonial-card blockquote { margin:20px 0 35px; max-width:820px; font-family:"Playfair Display",serif; font-size:clamp(25px,3vw,38px); line-height:1.25; }
.testimonial-person { display:flex; flex-direction:column; gap:2px; }
.testimonial-person span { color:var(--muted); font-size:14px; }
.testimonial-controls { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:28px; }
.testimonial-controls button {
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer; transition:.25s ease;
}
.testimonial-controls button:hover { background:var(--ink); color:white; border-color:var(--ink); }
.testimonial-dots { display:flex; gap:8px; }
.testimonial-dot { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:var(--line); cursor:pointer; }
.testimonial-dot.active { background:var(--ink); transform:scale(1.25); }

@media (max-width:800px) {
  .site-nav { max-height:80vh; overflow:auto; }
  .service-grid { gap:14px; }
  .service-card { min-height:330px; padding:30px; }
  .service-icon { top:24px; right:24px; width:50px; height:50px; }
  .service-card h3 { margin-top:60px; }
  .testimonial-heading { display:block; margin-bottom:35px; }
  .testimonial-heading p { margin-top:18px; }
  .testimonial-slider { min-height:460px; }
  .testimonial-card { padding:35px 28px; }
  .testimonial-card blockquote { font-size:27px; }
}
@media (prefers-reduced-motion:reduce) {
  .service-card:hover { transform:none; }
  .service-card::before,.service-card::after,.service-icon,.card-arrow { transition:none; }
}


/* Service hover details */
.service-hover-detail {
  position: absolute; left: 38px; right: 38px; bottom: 72px;
  padding: 16px 18px; background: rgba(247,245,240,.94);
  border-left: 2px solid var(--accent); color: var(--ink);
  font-size: 14px; line-height: 1.5; opacity: 0;
  transform: translateY(14px); pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); z-index: 3;
}
.service-card:hover .service-hover-detail,
.service-card:focus-within .service-hover-detail { opacity: 1; transform: none; }
.service-card:hover p { opacity: .35; }
.nav-detail-link { font-weight: 600; }
.services-more { display:flex; justify-content:flex-end; margin-top:34px; }

/* Dedicated services page */
.detail-hero {
  min-height:76vh; display:grid; grid-template-columns:1.1fr .9fr;
  align-items:center; gap:70px; padding-top:80px;
}
.detail-hero-copy h1 { max-width:820px; }
.detail-hero-art { min-height:500px; position:relative; overflow:hidden; }
.detail-shape { position:absolute; }
.detail-shape-one { width:66%; aspect-ratio:1; right:6%; top:4%; background:var(--teal); border-radius:52% 48% 40% 60%; transform:rotate(-12deg); }
.detail-shape-two { width:44%; aspect-ratio:1; left:4%; bottom:8%; background:var(--accent); border-radius:50%; }
.detail-shape-three { width:23%; aspect-ratio:1; right:0; bottom:0; background:var(--ink); border-radius:50%; }
.detail-intro { display:grid; grid-template-columns:1fr 2.5fr; gap:40px; border-top:1px solid var(--line); }
.detail-intro > div:last-child { max-width:900px; }
.detail-intro p { color:var(--muted); font-size:18px; }
.service-detail-list { padding-top:30px; }
.service-detail-block {
  position:relative; display:grid; grid-template-columns:90px 1fr 220px; gap:45px;
  padding:85px 0; border-top:1px solid var(--line); overflow:hidden;
}
.service-detail-block:last-child { border-bottom:1px solid var(--line); }
.service-detail-index { font-size:13px; color:var(--muted); letter-spacing:.12em; }
.service-detail-copy { position:relative; z-index:2; max-width:760px; }
.service-detail-copy h2 { max-width:760px; margin-bottom:25px; }
.service-detail-copy > p:not(.eyebrow) { color:var(--muted); font-size:18px; max-width:680px; }
.service-detail-copy ul { margin:30px 0 0; padding-left:20px; display:grid; gap:11px; }
.detail-accent {
  align-self:center; justify-self:end; width:170px; aspect-ratio:1; border-radius:50%; opacity:.9;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.service-detail-block:hover .detail-accent { transform:scale(1.08) rotate(8deg); }
.detail-accent-one { background:var(--accent); border-radius:45% 55% 60% 40%; }
.detail-accent-two { background:var(--teal); }
.detail-accent-three { background:var(--ink); border-radius:42% 58% 52% 48%; }
.detail-accent-four { background:#d9d4ca; border:22px solid var(--accent); }
.detail-cta { border-top:1px solid var(--line); }
.detail-cta > div { max-width:900px; }
.detail-cta h2 { max-width:800px; }

@media (max-width:800px) {
  .services-more { justify-content:flex-start; }
  .service-hover-detail {
    position:static; margin-top:18px; opacity:1; transform:none;
    background:transparent; padding:0 0 4px 14px; pointer-events:auto;
  }
  .service-card:hover p { opacity:1; }
  .detail-hero, .detail-intro { grid-template-columns:1fr; gap:45px; }
  .detail-hero { min-height:auto; padding-top:70px; }
  .detail-hero-art { min-height:360px; }
  .service-detail-block { grid-template-columns:1fr; gap:18px; padding:65px 0; }
  .detail-accent { width:115px; position:absolute; right:0; top:52px; opacity:.28; }
  .service-detail-copy { padding-right:25px; }
}
@media (prefers-reduced-motion:reduce) {
  .service-hover-detail, .detail-accent { transition:none; }
}


/* Responsive leadership portrait */
.portrait-placeholder {
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  background: #ddd9d0;
}

.portrait-placeholder .responsive-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 800px) {
  .portrait-placeholder {
    width: min(100%, 560px);
    aspect-ratio: 4 / 5;
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .portrait-placeholder {
    aspect-ratio: 3 / 4;
  }
}

/* Requested refinements */
.split-section { border-top: 1px solid var(--line); }

@media (hover: hover) and (pointer: fine) {
  .service-card > .service-number,
  .service-card > .service-icon,
  .service-card > h3,
  .service-card > p,
  .service-card > a {
    transition: opacity .28s ease, transform .38s cubic-bezier(.22,1,.36,1);
  }

  .service-card .service-hover-detail {
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center;
    padding: 42px;
    background: transparent;
    border-left: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.65;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    z-index: 5;
  }

  .service-card:hover { background: transparent; }
  .service-card:hover::before,
  .service-card:hover::after { opacity: 0; }

  .service-card:hover > .service-number,
  .service-card:hover > .service-icon,
  .service-card:hover > h3,
  .service-card:hover > p,
  .service-card:hover > a {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }

  .service-card:hover .service-hover-detail {
    opacity: 1;
    transform: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .service-hover-detail { display: none; }
}

.testimonial-card {
  border-radius: 24px;
  overflow: hidden;
}
@media (max-width: 800px) {
  .testimonial-card { border-radius: 18px; }
}


/* === Service-card interaction refinement ===
   Restore the colored hover character while keeping the card surface transparent. */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    background: transparent;
  }

  /* Restore each card's original colored mouseover artwork. */
  .service-card:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  /* Keep the secondary decorative circle subtle rather than removing it. */
  .service-card:hover::after {
    opacity: .35;
    transform: scale(1.7);
  }

  /* Only the expanded copy is visible over the hover artwork. */
  .service-card:hover > .service-number,
  .service-card:hover > .service-icon,
  .service-card:hover > h3,
  .service-card:hover > p,
  .service-card:hover > a {
    opacity: 0;
    visibility: hidden;
  }

  .service-card .service-hover-detail {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 38px;
    background: transparent;
    border: 0;
    opacity: 0;
    transform: translateY(10px);
  }

  .service-card:hover .service-hover-detail,
  .service-card:focus-within .service-hover-detail {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}

/* Responsive cleanup:
   remove the old static hover-detail layout that created empty vertical space. */
@media (max-width: 800px) {
  .service-card {
    min-height: 280px;
    padding: 28px;
  }

  .service-card h3 {
    margin-top: 48px;
  }

  @media (hover: hover) and (pointer: fine) {
    .service-card .service-hover-detail {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      margin: 0;
      padding: 28px;
      font-size: 15px;
      line-height: 1.55;
    }
  }
}

/* Real touch devices keep the normal card layout and do not reserve any
   space for desktop-only hover copy. */
@media (hover: none), (pointer: coarse) {
  .service-hover-detail {
    display: none !important;
    position: absolute !important;
  }

  .service-card {
    min-height: 0;
  }
}

/* 03 / Our Approach - left-aligned like the other content sections */
#approach.split-section {
  display: block;
}
#approach .split-art {
  display: none;
}
#approach .split-copy {
  width: 100%;
  max-width: 900px;
  margin: 0;
  text-align: left;
}
#approach .section-label {
  margin-bottom: 8px;
}
#approach .split-copy h3 {
  max-width: 760px;
}
#approach .split-copy p,
#approach .split-copy ul {
  max-width: 900px;
  margin-left: 0;
  margin-right: 0;
}
#approach .split-copy ul {
  padding-left: 22px;
}
@media (max-width: 800px) {
  #approach .split-copy {
    max-width: none;
  }
}

/* Approach visual process panel */
#approach.split-section {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);
  gap:clamp(55px,7vw,105px);
  align-items:start;
}
#approach .split-copy { max-width:860px; }
.approach-visual {
  position:sticky; top:135px; min-height:520px; margin-top:42px;
  padding:54px 38px; border:1px solid var(--line); border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(179,119,0,.18), transparent 31%),
    radial-gradient(circle at 4% 92%, rgba(157,185,177,.30), transparent 35%),
    rgba(232,229,221,.38);
}
.approach-visual::before {
  content:""; position:absolute; width:190px; height:190px; right:-85px; top:-80px;
  border:1px solid rgba(29,41,39,.14); border-radius:50%;
}
.approach-visual-line {
  position:absolute; top:82px; bottom:82px; left:60px; width:1px;
  background:linear-gradient(to bottom,var(--accent),var(--teal),var(--ink)); opacity:.65;
}
.approach-step {
  position:relative; display:grid; grid-template-columns:46px 1fr; align-items:center;
  gap:20px; min-height:125px; z-index:1;
}
.approach-step + .approach-step { margin-top:22px; }
.approach-step span {
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); font-size:11px;
  font-weight:700; letter-spacing:.08em;
}
.approach-step:nth-of-type(2) span { border-color:rgba(179,119,0,.45); }
.approach-step:nth-of-type(3) span { border-color:rgba(157,185,177,.8); }
.approach-step:nth-of-type(4) span { border-color:rgba(29,41,39,.5); }
.approach-step strong {
  font-family:"Playfair Display",serif; font-size:clamp(22px,2vw,30px);
  line-height:1.15; font-weight:500;
}
@media(max-width:900px){
  #approach.split-section { grid-template-columns:1fr; gap:42px; }
  .approach-visual { position:relative; top:auto; width:100%; min-height:0; margin-top:0; padding:34px 28px; }
  .approach-visual-line { top:58px; bottom:58px; left:50px; }
  .approach-step { min-height:95px; }
}


/* =========================================================
   AOPG COLOR STUDY #1 — EXECUTIVE CHARCOAL + ROYAL BLUE
   Charcoal: #25282D | Royal Blue: #144DD8
   ========================================================= */
:root {
  --ink: #25282D;
  --muted: #69717D;
  --paper: #F6F6F4;
  --accent: #144DD8;
  --teal: #9AAED8;
  --line: #D9DCE2;
}

/* Header / base surfaces */
.site-header {
  background: rgba(246,246,244,.94);
}
.site-nav a:hover,
.text-link:hover {
  color: var(--accent);
  opacity: 1;
}

/* Hero: blue + slate + charcoal */
.shape-one { background: #144DD8; }
.shape-two { background: #9AAED8; }
.shape-three { background: #32373E; }

/* Buttons */
.button {
  background: #25282D;
  border-color: #25282D;
  color: #fff;
}
.button:hover {
  background: #144DD8;
  border-color: #144DD8;
  color: #fff;
}

/* Service cards — preserve individual hover personality */
.service-card::before {
  background:
    radial-gradient(circle at 85% 10%, rgba(36,87,197,.28), transparent 34%),
    linear-gradient(135deg, transparent 55%, rgba(154,174,216,.18));
}
.service-card:nth-child(2)::before {
  background:
    radial-gradient(circle at 15% 85%, rgba(154,174,216,.38), transparent 36%),
    linear-gradient(135deg, transparent 55%, rgba(36,87,197,.13));
}
.service-card:nth-child(3)::before {
  background:
    radial-gradient(circle at 85% 85%, rgba(78,112,184,.30), transparent 35%),
    linear-gradient(135deg, rgba(36,87,197,.10), transparent 60%);
}
.service-card:nth-child(4)::before {
  background:
    radial-gradient(circle at 15% 15%, rgba(36,87,197,.25), transparent 35%),
    linear-gradient(135deg, transparent 55%, rgba(154,174,216,.18));
}
.service-card:hover {
  box-shadow: 0 28px 60px rgba(37,40,45,.13);
  border-color: rgba(36,87,197,.35);
}
.service-icon {
  border-color: rgba(36,87,197,.22);
}
.service-card:hover .service-icon {
  background: rgba(255,255,255,.52);
}

/* Testimonials */
.testimonial-card {
  background: #ECEFF5;
}
.quote-mark {
  color: #144DD8;
}
.testimonial-controls button:hover {
  background: #144DD8;
  border-color: #144DD8;
  color: white;
}
.testimonial-dot.active {
  background: #144DD8;
}

/* Contact becomes the strong charcoal anchor */
.contact {
  background: #25282D;
}
.contact .section-label,
.contact p {
  color: #C5CAD3;
}
input, textarea {
  border-bottom-color: #687181;
}
.contact .button {
  background: #fff;
  color: #25282D;
  border-color: #fff;
}
.contact .button:hover {
  background: #144DD8;
  border-color: #144DD8;
  color: #fff;
}

/* Portrait placeholder tone */
.portrait-placeholder {
  background: #E5E7EB;
}

/* Approach process panel */
.approach-visual {
  background:
    radial-gradient(circle at 92% 8%, rgba(36,87,197,.20), transparent 31%),
    radial-gradient(circle at 4% 92%, rgba(154,174,216,.34), transparent 35%),
    rgba(235,237,242,.62);
}
.approach-visual::before {
  border-color: rgba(36,87,197,.18);
}
.approach-visual-line {
  background: linear-gradient(to bottom, #144DD8, #9AAED8, #25282D);
}
.approach-step:nth-of-type(2) span { border-color: rgba(36,87,197,.60); }
.approach-step:nth-of-type(3) span { border-color: rgba(154,174,216,.95); }
.approach-step:nth-of-type(4) span { border-color: rgba(37,40,45,.55); }

/* Detailed services page */
.detail-shape-one { background: #9AAED8; }
.detail-shape-two { background: #144DD8; }
.detail-shape-three { background: #25282D; }

.detail-accent-one {
  background: #144DD8;
}
.detail-accent-two {
  background: #9AAED8;
}
.detail-accent-three {
  background: #25282D;
}
.detail-accent-four {
  background: #E6E9EF;
  border-color: #144DD8;
}

/* Small blue emphasis without overwhelming the typography */
.eyebrow,
.section-label {
  color: #667181;
}
.services-more .button span,
.detail-cta .button span {
  color: inherit;
}

@media (max-width: 800px) {
  .site-nav {
    background: #F6F6F4;
  }
}


/* Responsive AOPG navigation logo */
.site-header {
  min-height: 82px;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: clamp(180px, 22vw, 275px);
  line-height: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 900px) {
  .brand {
    width: clamp(165px, 32vw, 225px);
  }

  .brand img {
    max-height: 54px;
  }
}

@media (max-width: 520px) {
  .site-header {
    min-height: 68px;
  }

  .brand {
    width: min(52vw, 190px);
  }

  .brand img {
    max-height: 44px;
  }
}


/* === Service icon + button refinement === */

/* Remove circular containers from the service-card icons.
   Keep the symbols themselves as a clean graphic accent. */
.service-icon {
  width: auto;
  height: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
}

.service-card:hover .service-icon {
  background: transparent;
}

/* Reverse the primary button colors on hover:
   default = charcoal with white type
   hover = white with charcoal type/border. */
.button:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

/* Contact starts with the inverse treatment, so reverse it the other way. */
.contact .button {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.contact .button:hover {
  background: var(--ink);
  color: #fff;
  border-color: #fff;
}

/* Keep the mobile icon placement tidy now that there is no circle container. */
@media (max-width: 800px) {
  .service-icon {
    top: 28px;
    right: 28px;
    width: auto;
    height: auto;
    font-size: 27px;
  }
}


/* === Corrected button treatment ===
   Static: royal blue
   Hover: charcoal */
.button {
  background: #144DD8;
  color: #fff;
  border-color: #144DD8;
}

.button:hover {
  background: #25282D;
  color: #fff;
  border-color: #25282D;
}

/* Apply the same behavior in the dark Contact section. */
.contact .button {
  background: #144DD8;
  color: #fff;
  border-color: #144DD8;
}

.contact .button:hover {
  background: #25282D;
  color: #fff;
  border-color: #25282D;
}


/* === Typography update ===
   Primary/default: League Spartan
   Secondary/supporting: Montserrat */
html,
body,
button,
input,
textarea,
select {
  font-family: "League Spartan", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.brand,
.button,
.service-card h3,
.service-detail-copy h2,
.approach-step strong,
.testimonial-card blockquote {
  font-family: "League Spartan", sans-serif;
}

p,
li,
.eyebrow,
.section-label,
.service-number,
.service-detail-index,
.testimonial-person,
.site-footer,
.site-nav,
input,
textarea,
.contact-form,
.service-hover-detail {
  font-family: "Montserrat", sans-serif;
}

/* League Spartan benefits from slightly tighter headline leading. */
h1 { line-height: .96; }
h2 { line-height: 1.02; }
h3 { line-height: 1.08; }

.testimonial-card blockquote {
  line-height: 1.22;
  font-weight: 500;
}

.approach-step strong {
  line-height: 1.08;
  font-weight: 600;
}


/* === Contact submit button refinement ===
   Softer treatment for the charcoal contact section */
.contact .button {
  background: #F6F6F4;
  color: #25282D;
  border-color: #F6F6F4;
}

.contact .button:hover {
  background: transparent;
  color: #F6F6F4;
  border-color: #F6F6F4;
  transform: translateY(-2px);
}


/* =========================================================
   HYBRID UPDATE
   Previous AOPG design + reimagined Hero Art & Portrait Style
   ========================================================= */

/* Reimagined hero artwork, while preserving the original hero layout */
.hero-art {
  min-height: 620px;
  position: relative;
  overflow: hidden;
  background: #E8EBF2;
  border-radius: 0 0 0 140px;
}

.hero-art .shape {
  position: absolute;
}

.hero-art .shape-one {
  width: 86%;
  height: 58%;
  left: 22%;
  top: -8%;
  background: #144DD8;
  border-radius: 0 0 0 140px;
}

.hero-art .shape-two {
  width: 70%;
  height: 52%;
  left: -15%;
  bottom: -4%;
  background: #9AAED8;
  border-radius: 0 120px 0 0;
}

.hero-art .shape-three {
  width: 35%;
  height: 35%;
  right: 0;
  bottom: 0;
  background: #25282D;
  border-radius: 120px 0 0 0;
}

/* Reimagined portrait framing */
.portrait-placeholder {
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: #E5E7EB;
  border-radius: 0 100px 0 0;
  box-shadow: -28px 28px 0 #E6EAF3;
}

.portrait-placeholder .responsive-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
}

/* A very subtle blue accent behind the portrait so it connects to the hero */
.profile {
  position: relative;
}

.profile::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  left: -42px;
  bottom: -34px;
  border-radius: 50%;
  border: 1px solid rgba(36,87,197,.13);
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 900px) {
  .hero-art {
    min-height: 480px;
    border-radius: 0 0 0 100px;
  }

  .hero-art .shape-one {
    border-radius: 0 0 0 100px;
  }

  .hero-art .shape-two {
    border-radius: 0 90px 0 0;
  }

  .hero-art .shape-three {
    border-radius: 90px 0 0 0;
  }
}

@media (max-width: 800px) {
  .hero-art {
    min-height: 360px;
    border-radius: 0 0 0 72px;
  }

  .hero-art .shape-one {
    border-radius: 0 0 0 72px;
  }

  .hero-art .shape-two {
    border-radius: 0 64px 0 0;
  }

  .hero-art .shape-three {
    border-radius: 64px 0 0 0;
  }

  .portrait-placeholder {
    width: min(100%, 560px);
    margin-inline: auto;
    border-radius: 0 72px 0 0;
    box-shadow: -16px 16px 0 #E6EAF3;
  }

  .profile::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-art {
    min-height: 310px;
  }

  .portrait-placeholder {
    aspect-ratio: 3 / 4;
    border-radius: 0 54px 0 0;
    box-shadow: -11px 11px 0 #E6EAF3;
  }
}


/* === Blue section labels from the reimagined concept === */
.section-label {
  color: #144DD8;
}

/* Keep the label legible on the dark contact background while
   retaining the blue accent treatment. */
.contact .section-label {
  color: #7FA2EE;
}


/* Contact form delivery feedback */
.contact-form .form-status { margin: 8px 0 0; font-size: .95rem; line-height: 1.5; color: #fff; }
.contact-form .form-status.is-success { color: #dce9ff; }
.contact-form .form-status.is-error { color: #ffd2d2; }
.contact-form button[disabled] { opacity: .65; cursor: wait; }

/* Testimonials: readable long-form quotes with no clipped content.
   The active slide participates in normal document flow, allowing its
   height to grow to fit the complete testimonial on every screen. */
.testimonial-slider {
  height: auto;
  min-height: 0;
  max-width: 980px;
}
.testimonial-card {
  position: relative;
  inset: auto;
  display: none;
  height: auto;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 55px);
  opacity: 1;
  transform: none;
  pointer-events: none;
  overflow: visible;
  transition: none;
}
.testimonial-card.active {
  display: block;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.testimonial-card blockquote {
  max-width: 820px;
  margin: 18px 0 28px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.75;
  overflow-wrap: break-word;
  white-space: normal;
}
.testimonial-card .quote-mark {
  font-size: 66px;
  line-height: .8;
}
.testimonial-person {
  padding-top: 18px;
  border-top: 1px solid #D9DCE2;
}
@media (max-width: 800px) {
  .testimonial-slider { height: auto; min-height: 0; }
  .testimonial-card { padding: 30px 26px; }
  .testimonial-card blockquote { font-size: 15px; line-height: 1.7; }
}

/* Match the Contact submit button to the blue Hero CTA. */
.contact .contact-form .button {
  background: #144DD8;
  color: #fff;
  border-color: #144DD8;
}
.contact .contact-form .button:hover,
.contact .contact-form .button:focus-visible {
  background: #F6F6F4;
  color: #25282D;
  border-color: #F6F6F4;
  transform: none;
}

/* AOPG privacy policy review page */
.privacy-hero{padding-top:92px;padding-bottom:55px;border-bottom:1px solid var(--line)}
.privacy-hero h1{font-family:"League Spartan",sans-serif;font-size:clamp(48px,7vw,84px);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:18px 0 18px;max-width:none}
.privacy-intro{font-family:"Montserrat",sans-serif;color:var(--muted);font-size:clamp(16px,1.7vw,19px);max-width:790px;line-height:1.7}
.privacy-draft-alert{max-width:920px;padding:19px 24px;margin:29px 0 20px;border-left:4px solid #144DD8;background:#E9EDF8;color:#25282D;font:14px/1.7 "Montserrat",sans-serif}
.privacy-draft-alert strong{font-weight:700}
.privacy-updated{font:13px/1.6 "Montserrat",sans-serif;color:var(--muted)}
.privacy-body{display:grid;grid-template-columns:minmax(190px,270px) minmax(0,1fr);align-items:start;gap:clamp(35px,6vw,96px);padding-top:66px}
.privacy-toc{position:sticky;top:120px;font:13px/1.5 "Montserrat",sans-serif}
.privacy-toc-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#144DD8;font-weight:700}
.privacy-toc ol{padding-left:20px;display:grid;gap:14px}
.privacy-toc a:hover,.privacy-toc a:focus-visible{color:#144DD8;text-decoration:underline;text-underline-offset:3px}
.privacy-back{display:inline-block;margin-top:22px;font-weight:600;color:#144DD8}
.privacy-content{min-width:0}
.privacy-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:20px;border-bottom:1px solid var(--line);padding:0 0 40px;margin:0 0 43px;scroll-margin-top:125px}
.privacy-index{font:700 12px "Montserrat",sans-serif;color:#144DD8;padding-top:7px}
.privacy-item h2{font-size:clamp(23px,2.7vw,32px);font-weight:600;margin:0 0 18px;line-height:1.2}
.privacy-item p{color:#535D6A;font:15px/1.95 "Montserrat",sans-serif;overflow-wrap:anywhere;margin:0 0 16px}
.privacy-item .privacy-editorial-note{background:#EFF1F6;border-left:2px solid #9AAED8;padding:12px 16px;font-size:13px;color:#485363}
@media(max-width:800px){.privacy-hero{padding-top:55px;padding-bottom:38px}.privacy-body{display:block;padding-top:38px}.privacy-toc{position:static;border-bottom:1px solid var(--line);margin-bottom:42px;padding-bottom:22px}.privacy-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:12px 24px}.privacy-item{grid-template-columns:30px minmax(0,1fr);gap:12px;margin-bottom:30px;padding-bottom:28px}}
@media(max-width:480px){.privacy-toc ol{grid-template-columns:1fr}.privacy-item p{font-size:14px;line-height:1.8}}

/* Services: align card headings and descriptions across each desktop row.
   Previously, the auto bottom margin on the service number shifted titles
   according to the amount of descriptive text in each card. */
#services .service-card > .service-number {
  margin-bottom: 0;
}
#services .service-card > h3 {
  margin-top: 68px;
  min-height: 2.35em;
  margin-bottom: 18px;
}
@media (min-width: 801px) and (max-width: 1050px) {
  #services .service-card > h3 {
    min-height: 3.3em;
  }
}
@media (max-width: 800px) {
  #services .service-card > h3 {
    margin-top: 48px;
    min-height: 0;
  }
}

/* Services page: match AOPG primary blue for service numbers. */
.services-page .service-detail-index { color: #144DD8; font-weight: 700; }


/* Approach visual cleanup: remove upper-right quarter-circle and
   limit connectors to the spaces between the numbered circles. */
#approach .approach-visual::before {
  content: none;
  display: none;
}
#approach .approach-visual {
  background:
    radial-gradient(circle at 4% 92%, rgba(154,174,216,.34), transparent 35%),
    rgba(235,237,242,.62);
}
#approach .approach-visual-line {
  display: none;
}
#approach .approach-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 22.5px;
  top: calc(50% + 23px);
  height: calc(100% - 46px + 22px);
  width: 1px;
  background: linear-gradient(to bottom, #144DD8, #9AAED8);
  pointer-events: none;
}
#approach .approach-step span {
  position: relative;
  z-index: 1;
}


/* Approach: standard round bullets in the website's primary blue. */
#approach .split-copy ul {
  list-style: disc outside;
  padding-left: 26px;
  margin: 22px 0 30px;
  display: grid;
  gap: 12px;
}
#approach .split-copy ul li {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #535D6A;
}
#approach .split-copy ul li::marker {
  color: #144DD8;
}
@media (max-width: 800px) {
  #approach .split-copy ul { gap: 11px; }
  #approach .split-copy ul li { font-size: 15px; }
}

/* Privacy page: allow introductory statement to use the full desktop content width. */
.privacy-hero .privacy-intro { max-width: 1100px; width: 100%; }