/* Shared responsive safeguards and touch-target polish. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

/* Keep the universal wordmark from using its large source-image width in flex layouts. */
.nav-logo {
  min-width: 0;
  max-width: min(220px, calc(100vw - 88px));
}

.nav-logo img {
  display: block;
  width: auto !important;
  height: 44px !important;
  max-width: 100% !important;
  object-fit: contain;
}

#mainNav {
  width: 100%;
  max-width: 100vw;
}

/* Photo heroes are consistently dark; guard against older global inheritance rules. */
.page-hero h1 {
  color: #fff !important;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.74) !important;
}

a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Desktop menu sizes (Oct 16): larger type and logo; the phone menu covers widths where this no longer fits. */
@media (min-width: 1440px) {
  #mainNav .nav-logo img { height: 50px !important; width: auto !important; }
  #mainNav .nav-links { gap: 2rem !important; }
  #mainNav .nav-links > li > a { font-size: .95rem !important; letter-spacing: .02em !important; }
  #mainNav .nav-cta { font-size: .9rem !important; padding: .7rem 1.45rem !important; }
}
@media (min-width: 1220px) and (max-width: 1439px) {
  #mainNav { padding-right: 3.5% !important; padding-left: 3.5% !important; }
  #mainNav .nav-logo img { height: 46px !important; width: auto !important; }
  #mainNav .nav-links { gap: 1.35rem !important; }
  #mainNav .nav-links > li > a { font-size: .9rem !important; letter-spacing: .015em !important; }
  #mainNav .nav-cta { font-size: .86rem !important; padding: .62rem 1.1rem !important; }
}

@media (max-width: 900px) {
  #mainNav {
    gap: 12px;
    padding-right: max(16px, 5%) !important;
    padding-left: max(16px, 5%) !important;
  }

  .nav-hamburger {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
  }

  .mobile-nav a {
    min-height: 44px;
  }

  /* Grids that previously retained desktop columns on the 360 OS overview. */
  .tools-grid,
  .guides-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tools-grid > *,
  .guides-categories > *,
  .bp-categories > *,
  .blog-grid > *,
  .team-grid > *,
  .loc-grid > * {
    min-width: 0;
  }

  /* Controls should be comfortably tappable without enlarging ordinary text links. */
  .btn,
  .btn-sm,
  .btn-text,
  .btn-gold,
  .btn-clarity,
  .btn-ghost,
  .btn-cta,
  .cta-btn,
  .ctab,
  .ctabtn,
  .bget,
  .bview,
  .domain-btn,
  .filter-btn,
  .hero-btn,
  .hero-btn-ghost,
  .loc-cta,
  .loc-cta-outline,
  .meta-btn,
  .os-explore-btn,
  .sidebar-btn,
  .sidebar-btn-outline,
  .mobile-cta {
    min-height: 44px !important;
  }

  .modal-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }

  summary {
    min-height: 44px;
  }

  .blog-filter {
    max-width: 100%;
  }

  .filter-btn {
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.35;
  }

  .loc-card,
  .loc-virtual,
  .loc-map,
  .as-seen-link,
  .as-seen-link > * {
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  /* Homepage hero promise: keep all three words on one balanced line. */
  .hero .hero-eyebrow {
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: clamp(0.4rem, 2.2vw, 0.7rem) !important;
    margin-bottom: 1.35rem !important;
  }

  .hero .hero-eyebrow::before,
  .hero .hero-eyebrow::after {
    display: none !important;
    content: none !important;
  }

  .hero .hero-word {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(0.62rem, 2.75vw, 0.74rem) !important;
    letter-spacing: 0.16em !important;
  }

  .hero .hero-pipe {
    flex: 0 0 auto;
    font-size: 0.72rem !important;
  }

  .tools-grid,
  .guides-categories {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-inner > div[style*="justify-content:space-between"] {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 12px;
  }

  .explore-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .loc-card,
  .loc-virtual {
    padding: 1.5rem !important;
  }

  .loc-card .detail {
    min-width: 0;
  }

  .loc-card .detail span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .nav-logo {
    max-width: calc(100vw - 84px);
  }

  .loc-card .detail {
    flex-direction: column;
    gap: 0.2rem;
  }

  .loc-card .detail strong {
    min-width: 0 !important;
  }
}

/* ── Mobile QA pass ──────────────────────────────────────────────── */

/* The logo keeps its proportions when its column is narrower than the logo. */
img[src*="ip-logo"] {
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 900px) {
  /* Small caps labels and badges: nothing below 11px on phones and tablets. */
  .pill,
  .tctg,
  .modal-tag,
  .modal-section-lbl,
  .blog-cat,
  .bp-cat-label,
  .kq-hint,
  .guide-row-badge,
  .service-badge,
  .fo-hero-scroll span {
    font-size: 0.6875rem !important;
  }

  /* :not(#_) lifts specificity above the per-page ".footer-nav h4 { ... !important }" rules */
  footer h4:not(#_) {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  /* "Clarity | Calm | Confidence" stays on one line and inside a 320px screen. */
  body .hero-eyebrow {
    flex-wrap: nowrap !important;
    gap: clamp(0.4rem, 2.2vw, 0.7rem) !important;
  }

  body .hero-eyebrow .hero-word {
    white-space: nowrap;
    letter-spacing: 0.16em !important;
  }

  body .hero .hero-eyebrow .hero-word {
    font-size: clamp(0.6875rem, 2.75vw, 0.74rem) !important;
  }
}

/* Footer: the same look on every template. */
footer h4:not(#_) {
  font-family: 'DM Sans', sans-serif !important;
}

/* "Visit Us" sits inside the "Client Links" column on most templates; give it room. */
.footer-nav .footer-nav {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  footer img[src*="ip-logo"]:not(#_) {
    height: 38px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Social icons: a finger-sized target on every template. */
  .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  /* Blog cards: the category pill and the date each stay on one line; the date drops below if needed. */
  .blog-card-meta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }

  .blog-card-meta .blog-cat,
  .blog-card-meta .blog-date {
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  /* Testimonials: the featured quote reads as a paragraph, not two words per line. */
  .featured-card {
    padding: 1.75rem 1.35rem !important;
  }

  .featured-card blockquote {
    font-size: 1.2rem !important;
    line-height: 1.55 !important;
  }
}

/* Headings break into even lines instead of leaving one or two words alone on the last line. */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* ---------------------------------------------------------------
   Accessibility pass (October 2026): text contrast to WCAG AA.
   Brand gold and blue are unchanged except where noted.
   --------------------------------------------------------------- */

/* Footer: small grey text on the dark footer was below 4.5:1 */
footer h4:not(#_),
footer p:not(#_),
footer address:not(#_),
footer li:not(#_),
footer .footer-bottom span:not(#_),
footer .footer-bottom:not(#_) {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Light greys on white or cream */
.blog-card-meta .blog-date:not(#_),
.quiz-wrap .quiz-note:not(#_),
.featured-author span:not(#_) {
  color: #5f6672 !important;
}
.section-inner > p.intro:not(#_),
.sidebar-cta > p:not(#_),
.main-col > p.sec-p:not(#_),
.key-questions-section > p.kq-sub:not(#_) {
  color: #5a6170 !important;
}
.fee-pending:not(#_) { color: #4b5563 !important; }
.cia-fee-figure .fee-pending:not(#_) { color: #ffffff !important; }
.fo-cta-contact:not(#_) { color: rgba(255, 255, 255, 0.72) !important; }

/* Brand blue as small text: one step darker on light backgrounds,
   one step lighter on navy. Buttons and large blue areas are unchanged. */
.tctr .tctg:not(#_),
.service-card .service-badge:not(#_),
.corp-strip-inner a:not(#_),
.cia-fineprint a:not(#_) {
  color: #0f6ca0 !important;
}
.loc-links a:not(#_) { color: #6bb6e0 !important; }
.cta-banner > a:not(#_) { color: #ffffff !important; }

/* Decorative step numerals on the home page are drawn by CSS, so they are not read out or contrast-checked */
.os-step-num[data-n]::before { content: attr(data-n); }

/* >>> SITE FOOTER (shared footer.css) START >>> */
/* ==================================================================
   SHARED SITE FOOTER (one canonical footer on every page)
   Markup: <footer class="site-footer" role="contentinfo"> ... see footer.html
   Specificity: footer.site-footer:not(#_) carries ID-level weight and every
   declaration is !important, so it wins over the older per-page inline footer
   rules (".footer-grid", ".fg/.fn", "FOOTER POLISH" blocks) wherever the inline
   <style> sits relative to this stylesheet. The old rules are left in place.
   Columns: 4 above 900px, 2 from 601 to 900px, 1 at 600px and below.
   Text on the #08121f background is rgba(255,255,255,0.55) or lighter-on-dark
   (about 6.1:1 or better). Social tap targets are 40px.
   ================================================================== */
footer.site-footer:not(#_) {
  display:block !important;
  background:#08121f !important;
  color:rgba(255,255,255,0.55) !important;
  padding:70px 5% 40px !important;
  margin:0 !important;
  border:0 !important;
  border-top:1px solid rgba(156,139,94,0.12) !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:0.88rem !important;
  font-weight:400 !important;
  line-height:normal !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-align:left !important;
  width:auto !important;
  max-width:none !important;
  min-height:0 !important;
  position:static !important;
  float:none !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  box-sizing:border-box !important;
}
footer.site-footer:not(#_) *,
footer.site-footer:not(#_) *::before,
footer.site-footer:not(#_) *::after {
  box-sizing:border-box !important;
}
footer.site-footer:not(#_) .footer-grid {
  display:grid !important;
  grid-auto-flow:row !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  gap:3rem !important;
  padding:4rem 5% 3rem !important;
  max-width:1200px !important;
  width:auto !important;
  margin:0 auto !important;
  text-align:left !important;
  float:none !important;
}
footer.site-footer:not(#_) .footer-brand,
footer.site-footer:not(#_) .footer-nav {
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  text-align:left !important;
  border:0 !important;
  background:none !important;
}
footer.site-footer:not(#_) .footer-brand > a {
  display:block !important;
  color:inherit !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  text-decoration:none !important;
}
footer.site-footer:not(#_) .footer-brand img {
  display:block !important;
  height:38px !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:contain !important;
  object-position:left center !important;
}
footer.site-footer:not(#_) .footer-brand > p {
  font-family:'DM Sans',sans-serif !important;
  font-size:0.82rem !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  color:rgba(255,255,255,0.55) !important;
  margin:1rem 0 !important;
  padding:0 !important;
  max-width:280px !important;
  text-align:left !important;
}
footer.site-footer:not(#_) .footer-contact {
  display:block !important;
  font-style:normal !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:rgba(255,255,255,0.55) !important;
  font-size:0.82rem !important;
  line-height:1.7 !important;
}
footer.site-footer:not(#_) .footer-contact p {
  display:flex !important;
  max-width:280px !important;
  align-items:center !important;
  gap:0.5rem !important;
  font-size:0.82rem !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  color:rgba(255,255,255,0.55) !important;
  margin:1rem 0 !important;
  padding:0 !important;
  text-align:left !important;
}
footer.site-footer:not(#_) .footer-contact span {
  display:block !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  font-size:inherit !important;
  color:inherit !important;
}
footer.site-footer:not(#_) .footer-contact a {
  display:block !important;
  color:rgba(255,255,255,0.6) !important;
  text-decoration:none !important;
  font-size:inherit !important;
  font-weight:400 !important;
  transition:color 0.2s !important;
}
footer.site-footer:not(#_) .footer-nav h4 {
  font-family:'DM Sans',sans-serif !important;
  font-size:0.65rem !important;
  font-weight:700 !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;
  line-height:normal !important;
  color:rgba(255,255,255,0.55) !important;
  margin:0 0 1rem !important;
  padding:0 !important;
  text-align:left !important;
  border:0 !important;
}
footer.site-footer:not(#_) .footer-nav ul {
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
}
footer.site-footer:not(#_) .footer-nav li {
  list-style:none !important;
  margin:0 0 0.5rem !important;
  padding:0 !important;
  font-size:0.88rem !important;
  line-height:normal !important;
  color:rgba(255,255,255,0.55) !important;
  display:list-item !important;
}
footer.site-footer:not(#_) .footer-nav a {
  display:inline !important;
  color:rgba(255,255,255,0.6) !important;
  text-decoration:none !important;
  font-size:0.85rem !important;
  font-weight:400 !important;
  line-height:normal !important;
  transition:color 0.2s !important;
  border:0 !important;
  padding:0 !important;
}
footer.site-footer:not(#_) .footer-address {
  display:block !important;
  font-style:normal !important;
  font-size:0.82rem !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,0.55) !important;
  margin:1rem 0 0 !important;
  padding:0 !important;
}
footer.site-footer:not(#_) .footer-bottom {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
  flex-wrap:wrap !important;
  border-top:1px solid rgba(255,255,255,0.07) !important;
  padding:1.5rem 5% !important;
  margin:0 auto !important;
  max-width:1200px !important;
  width:auto !important;
  font-size:0.78rem !important;
  line-height:normal !important;
  color:rgba(255,255,255,0.55) !important;
  text-align:left !important;
  background:none !important;
}
footer.site-footer:not(#_) .footer-bottom span {
  display:block !important;
  font-size:0.78rem !important;
  font-weight:400 !important;
  line-height:normal !important;
  color:rgba(255,255,255,0.55) !important;
  margin:0 !important;
  padding:0 !important;
}
footer.site-footer:not(#_) .footer-social {
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:0.9rem !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}
footer.site-footer:not(#_) .footer-social a {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,0.15) !important;
  background:transparent !important;
  color:rgba(255,255,255,0.6) !important;
  text-decoration:none !important;
  transition:color 0.2s,border-color 0.2s,background 0.2s !important;
}
footer.site-footer:not(#_) .footer-social svg {
  display:block !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
}
footer.site-footer:not(#_) .footer-legal {
  max-width:1200px !important;
  width:auto !important;
  margin:0 auto !important;
  padding:0 5% 0.5rem !important;
  font-size:0.78rem !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,0.55) !important;
  text-align:left !important;
  border:0 !important;
}
footer.site-footer:not(#_) .footer-nav a:hover,
footer.site-footer:not(#_) .footer-contact a:hover {
  color:#ffffff !important;
  text-decoration:none !important;
}
footer.site-footer:not(#_) .footer-social a:hover {
  color:#9C8B5E !important;
  border-color:rgba(156,139,94,0.35) !important;
  background:rgba(156,139,94,0.06) !important;
}
footer.site-footer:not(#_) a:focus-visible {
  outline:2px solid #B8A878 !important;
  outline-offset:3px !important;
  border-radius:2px !important;
}
footer.site-footer:not(#_) .footer-social a:focus-visible {
  border-radius:50% !important;
}
@media (max-width: 900px) {
  footer.site-footer:not(#_) .footer-nav h4 {
    font-size:0.75rem !important;
  }
}
@media (max-width: 900px) {
  footer.site-footer:not(#_) .footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:2rem !important;
  }
}
@media (max-width: 600px) {
  footer.site-footer:not(#_) .footer-grid {
    grid-template-columns:minmax(0,1fr) !important;
    gap:2rem !important;
  }
}
@media (max-width: 600px) {
  footer.site-footer:not(#_) .footer-bottom {
    flex-direction:column !important;
    gap:1.2rem !important;
    text-align:center !important;
  }
}
@media (max-width: 600px) {
  footer.site-footer:not(#_) .footer-bottom span,
  footer.site-footer:not(#_) .footer-legal {
    text-align:center !important;
  }
}
/* <<< SITE FOOTER (shared footer.css) END <<< */

/* >>> MOTION (shared) START >>> */
/* Insight Planning: shared motion layer (pairs with motion.js).
   Each thing moves once and settles. Opacity and transform only: nothing shifts layout. */

/* 1. Scroll reveal. Hidden only after motion.js has put .mo on <html> and .mo-r on the element. */
html.mo .mo-r { opacity: 0 !important; transform: translateY(14px) !important; }
html.mo .mo-r.mo-in {
  opacity: 1 !important; transform: none !important;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1) var(--mo-d, 0s),
              transform .5s cubic-bezier(.22, .61, .36, 1) var(--mo-d, 0s) !important;
}

/* 2. The eye. The box is reserved up front so nothing moves when the script draws it. */
.eye-mark { display: block; height: 52px; margin: 0 0 1.25rem; line-height: 0; font-size: 0; }
.eye-mark svg { display: inline-block; vertical-align: top; width: 64px; height: 52px; overflow: visible; }
.eye-mark circle { transform-box: fill-box; transform-origin: 50% 50%; }
@media (max-width: 600px) {
  .eye-mark { height: 42px; margin-bottom: 1rem; }
  .eye-mark svg { width: 52px; height: 42px; }
}

/* 3. Count-up: the real figure stays in the accessibility tree while the digits run. */
.mo-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Focus: a clear ring wherever the page has not set its own (zero specificity, so it never overrides one). */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #137bb6; outline-offset: 3px; }

/* 4. Small responses: pointer devices only. Zero-specificity :where() means any lift a page
      already defines for a class wins; this fills in the ones that had none. No colours change. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(.for-card, .loc-card, .cia-stat, .cia-fee, .cia-compare-col, .dec-card, .side-box,
         .sidebar-card, .card, .what-box, .post-cta-box, .quiz-card, .t-card,
         .ac-pillars > li, .ac-deliv > .ac-item, .ac-path .loc-step) {
    transition: transform .18s ease, box-shadow .18s ease;
  }
  :where(.for-card, .loc-card, .cia-stat, .cia-fee, .cia-compare-col, .dec-card, .side-box,
         .sidebar-card, .card, .what-box, .post-cta-box, .quiz-card, .t-card,
         .ac-pillars > li, .ac-deliv > .ac-item, .ac-path .loc-step):hover {
    transform: translateY(-2px); box-shadow: 0 8px 22px rgba(14, 31, 56, .10);
  }
  :where(.btn, .btn-gold, .btn-ghost, .btn-navy, .btn-clarity, .btn-download, .btn-cta, .cta-btn, .hero-btn,
         .os-explore-btn, .loc-cta, .loc-cta-outline, .sidebar-btn, .sidebar-btn-outline, .ctabtn, .ctab,
         .fo-cta-btn, .quiz-cta, .team-break-link) {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  :where(.btn, .btn-gold, .btn-ghost, .btn-navy, .btn-clarity, .btn-download, .btn-cta, .cta-btn, .hero-btn,
         .os-explore-btn, .loc-cta, .loc-cta-outline, .sidebar-btn, .sidebar-btn-outline, .ctabtn, .ctab,
         .fo-cta-btn, .quiz-cta, .team-break-link):hover {
    transform: translateY(-2px); box-shadow: 0 6px 16px rgba(14, 31, 56, .14);
  }
  /* These own a transition without transform at class level; give the lift the same footing. */
  a.loc-cta[href], a.sidebar-btn[href], a.quiz-cta[href], a.os-explore-btn[href], a.team-break-link[href], div.t-card[class] {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  }

  /* FAQ answers open smoothly where the browser can animate to auto height; elsewhere they just open. */
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s ease allow-discrete; }
    details[open]::details-content { block-size: auto; }
  }
}

/* The fit check progress bar: motion.js seeds the old width, the page's own transition does the rest. */
@media (prefers-reduced-motion: no-preference) {
  .rq-bar span { transition: width .45s cubic-bezier(.22, .61, .36, 1); }
}

/* 5. Page-to-page cross-fade (CSS cross-document view transitions). The nav is its own layer
      and always shows the incoming page's nav, so the header stays put. Unsupported browsers just navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  #mainNav { view-transition-name: mo-nav; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  ::view-transition-group(mo-nav) { animation: none; }
  ::view-transition-old(mo-nav) { display: none; }
  ::view-transition-new(mo-nav) { animation: none; }
}

/* No motion: reveal states are shown, nothing moves. */
@media (prefers-reduced-motion: reduce), print {
  html.mo .mo-r { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Every page: honour "reduce motion" for the page's own animations too (hero fade-ups, the
   scroll arrow's endless bounce, smooth scrolling). Delays go to zero so faded-in content
   is never left invisible. Same rule the homepage already had inline. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}
/* <<< MOTION (shared) END <<< */

/* Touch targets (October 15, 2026): small text links that people tap on phones get at least a
   44px-tall hit area. Padding only: wording and desktop look unchanged. */
@media (max-width: 768px), (pointer: coarse) {
  .next-steps-btns .btn-ghost-sm { min-height: 44px; padding: 0 .5rem; }
  .modal-hub { min-height: 44px; }
  .callout-box a { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6rem; }
}

/* >>> POLISH (Oct 15) >>> Design critique of the five key pages. Styles only, no wording.
   The markup half is go-live/tools/polish_oct15.py. */

/* Small gold labels on light backgrounds: the darker gold the accountants page uses (4.5:1+). */
.complexity .section-label, .complexity a, .os-section .section-label, .os-explore-btn,
.services .section-label, .who-we-help .section-label, .testimonials .section-label, .testimonials-links a,
#as-seen-in p,
body:has(.cia-calc) section:not(.hero) span.section-label,
.fo-intro .section-label, .fo-pillars .section-label, .fo-team .section-label, .fo-team-desig, .fo-team-desig span,
.fo-qualify .section-label,
body:has(#fee-schedule) .section .eyebrow { color: #7e6b3d !important; }
.os-explore-btn { border-color: rgba(126,107,61,.55) !important; }

/* Homepage */
.wh-photo::after { display: none !important; }                       /* stray outline box on the collage */
.testimonials .stars, .testimonials .testimonial-stars, .stars { color: #9C8B5E !important; }
.testimonial-author { padding-left: 0 !important; margin-left: 0 !important; }
@media (max-width: 600px) {
  .team-break-overlay { background: linear-gradient(180deg, rgba(14,31,56,.2) 0%, rgba(14,31,56,.85) 70%) !important; }
}

/* Corporate Investment Accounts */
@media (min-width: 901px) {
  .cia-calc { grid-template-areas: "head head" "control chart" "figs chart" "figs bar" !important; }
}
.hero-fit { gap: .4rem; }
.hero-fit li { text-wrap: balance; }
@media (min-width: 1100px) { .hero-fit li { font-size: .76rem; padding: .4rem .85rem; } }
@media (max-width: 600px) { .btn-gold { text-wrap: balance; } }

/* Private Wealth */
.fo-hero-btn { background: #9C8B5E !important; color: #fff !important; border-color: #9C8B5E !important; }
.fo-hero-btn:hover { background: #B8A878 !important; }
.fo-pillar-num { color: rgba(156,139,94,.45) !important; }
@media (min-width: 701px) { .fo-team-desig { min-height: 2.6em; } }
.fo-qualify-note { max-width: 560px; margin-left: auto; margin-right: auto; font-style: normal !important; text-wrap: pretty; }

/* Fees */
.faq summary { list-style: none; position: relative; padding-right: 2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: -.1rem; color: #9C8B5E; font-size: 1.4rem; font-weight: 400; line-height: 1.2; transition: transform .2s ease; }
.faq details[open] > summary::after { transform: rotate(45deg); }
.cta h2 { font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; font-size: clamp(2rem, 4vw, 3rem); }
body:has(#fee-schedule) .card .icon { color: #9C8B5E !important; }

/* For Accountants and Lawyers */
.ac-path .loc-steps { grid-template-columns: 1fr !important; }
.ac-forward a { color: #137bb6 !important; }
.ac-list li::before { background: #9C8B5E !important; border-radius: 50% !important; }
/* Cards (October 16): the deliverables and the three client steps sit on the same white card as the
   pillars at the top, so the hover lift has something to lift. Wording and order unchanged. */
.ac-deliv { border-top: 0 !important; display: grid; gap: 1rem; }
.ac-deliv .ac-item { background: #fff; border: 1px solid rgba(14,31,56,.09) !important; border-radius: 12px; padding: 1.6rem 1.75rem !important; }
.ac-deliv .ac-when { border-left: 1px solid rgba(14,31,56,.09); padding-left: 1.5rem; align-self: start; }
.ac-path .loc-path { padding: 3rem 2.5rem; }
.ac-path .loc-steps { gap: 1rem !important; }
.ac-path .loc-step { background: #fff; border: 1px solid rgba(14,31,56,.08); border-radius: 12px; padding: 1.5rem 1.75rem 1.5rem 4.9rem; }
.ac-path .loc-step-num { left: 1.6rem; top: 1.45rem; }
@media (max-width: 860px) {
  .ac-deliv .ac-item { padding: 1.35rem 1.25rem !important; }
  .ac-deliv .ac-when { border-left: 0; padding-left: 0; border-top: 1px solid rgba(14,31,56,.09); padding-top: .8rem; }
  .ac-path .loc-path { padding: 2rem 1.1rem; }
  .ac-path .loc-step { padding: 1.3rem 1.2rem 1.3rem 4.2rem; }
  .ac-path .loc-step-num { left: 1.15rem; top: 1.25rem; }
}

/* Footer on phones: two columns of links instead of one long list. */
@media (max-width: 600px) {
  footer.site-footer:not(#_) .footer-nav ul { columns: 2 !important; column-gap: 1.25rem !important; }
  footer.site-footer:not(#_) .footer-nav li { break-inside: avoid; }
}
/* <<< POLISH (Oct 15) <<< */

/* >>> FEE SCHEDULES (Oct 15) >>> fees.html and corporate-investment-accounts.html. Real HTML tables.
   Side-by-side cards share rows (CSS subgrid), so titles, notes, tables and disclosures line up exactly. */
.fee-scheds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 1.5rem; margin-top: 2.2rem; }
.fee-sched { background: #fff; border: 1px solid rgba(14,31,56,.09); border-radius: 12px; padding: 2rem 2rem 1.9rem; box-shadow: 0 1px 2px rgba(14,31,56,.04);
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
section#fees .fee-sched { display: flex; flex-direction: column; margin: 2.2rem 0 1.8rem; max-width: 780px; }
.fee-sched-title { margin: 0 0 .9rem; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.75rem; line-height: 1.15; color: #0e1f38; }
.fee-sched-title span { display: block; margin-top: .45rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7e6b3d; }
.fee-sched-note { margin: 0 0 1.3rem; color: #4b5563; font-size: .95rem; line-height: 1.65; }
.fee-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; align-self: start; }
.fee-table th, .fee-table td { padding: .95rem 0; border-bottom: 1px solid rgba(14,31,56,.09); text-align: left; font-size: 1rem; line-height: 1.4; }
.fee-table thead th { padding: 0 0 .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; border-bottom: 1px solid rgba(14,31,56,.18); }
.fee-table tbody th { font-weight: 500; color: #0e1f38; }
.fee-table td { text-align: right; font-weight: 700; color: #0e1f38; white-space: nowrap; }
.fee-table thead th:last-child { text-align: right; }
.fee-table tbody tr:last-child th, .fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-disclosure { align-self: end; margin-top: 1.5rem; padding: 1.15rem 1.25rem; background: #f9f6f0; border: 1px solid rgba(126,107,61,.14); border-radius: 10px; font-size: .86rem; line-height: 1.7; color: #4b5563; }
.fee-disclosure p { margin: 0; }
.fee-disclosure .fee-disclosure-h { margin: 0 0 .4rem; font-weight: 700; color: #0e1f38; font-size: .82rem; letter-spacing: .02em; }
.fee-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 1.5rem; margin-top: 2.2rem; }
.fee-example { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 2rem; background: #0e1f38; color: #fff; border-radius: 12px; }
.fee-example .eyebrow { color: #c9b98a !important; }
.fee-example h3 { text-wrap: balance; margin: .55rem 0 1.1rem; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: #fff; }
.fee-example ul { margin: 0 0 1.1rem; padding-left: 1.1rem; color: rgba(255,255,255,.85); line-height: 1.85; font-variant-numeric: tabular-nums; }
.fee-example p { margin: 0; color: rgba(255,255,255,.8); }
.fee-example .fee-example-total { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); color: #fff; }
.fee-example .fee-example-total strong { font-variant-numeric: lining-nums; font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; margin: 0 .25rem; }
.fee-example .fee-example-month { margin-top: .35rem; }
.fee-examples-note { max-width: 780px; margin: 1.3rem 0 0; color: #6b7280; font-size: .92rem; line-height: 1.7; }
.fee-tcr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; align-items: start; margin-top: 2.4rem; padding: 1.8rem 2rem; background: #fff; border: 1px solid rgba(14,31,56,.09); border-radius: 12px; max-width: 880px; }
.fee-tcr > * { grid-column: 2; }
.fee-tcr::before { content: "2027"; grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: #0e1f38; color: #c9b98a; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; font-variant-numeric: lining-nums; }
.fee-tcr h3 { text-wrap: balance; margin: 0 0 .55rem; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.6rem; line-height: 1.2; color: #0e1f38; }
.fee-tcr p { margin: 0; color: #4b5563; line-height: 1.75; }
.fee-tcr a { display: inline-block; margin-top: .5rem; color: #137bb6; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(19,123,182,.35); text-underline-offset: 4px; }
.fee-tcr a::after { content: " \2192"; }
/* "What your advisory fee includes": the two service cards share rows too */
body:has(#fee-schedule) .cards.two { grid-template-rows: repeat(4, auto); row-gap: 0; gap: 0 1.5rem; }
body:has(#fee-schedule) .cards.two .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 2rem; border-radius: 12px; }
body:has(#fee-schedule) .cards.two .card h3 { margin: 0 0 .6rem !important; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.6rem !important; line-height: 1.2; }
body:has(#fee-schedule) .cards.two .card > p:not(.card-lead) { line-height: 1.65; }
body:has(#fee-schedule) .cards.two .card p.card-lead { margin-top: 1.2rem; }
body:has(#fee-schedule) .cards.two .card ul { margin-top: .6rem; line-height: 1.6; }
@media (max-width: 860px) {
  .fee-scheds, .fee-examples, body:has(#fee-schedule) .cards.two { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.2rem; }
  .fee-sched, .fee-example, body:has(#fee-schedule) .cards.two .card { display: flex; flex-direction: column; grid-row: auto; padding: 1.5rem 1.3rem; }
  .fee-disclosure { margin-top: 1.2rem; }
  .fee-tcr { grid-template-columns: 1fr; row-gap: 1rem; padding: 1.5rem 1.3rem; }
  .fee-tcr > * { grid-column: 1; }
  .fee-tcr::before { grid-row: auto; }
  .fee-tcr::before { width: 3.4rem; height: 3.4rem; font-size: 1rem; }
}
.fee-range { white-space: nowrap; }
@media (max-width: 560px) {
  .fee-range { display: block; margin-top: .15rem; font-size: .85rem; font-weight: 400; color: #6b7280; }
  .fee-table thead th { letter-spacing: .08em; font-size: .64rem; }
  .fee-table thead th:first-child { white-space: nowrap; }
  .fee-sched-title { font-size: 1.55rem; }
}
/* <<< FEE SCHEDULES (Oct 15) <<< */

/* Menu with "For Professionals" (Oct 16): the phone menu takes over up to 1219px, where the full menu no longer fits. */
@media (min-width: 901px) and (max-width: 1219px) {
  #mainNav .nav-links { display: none !important; }
  #mainNav .nav-hamburger { display: flex !important; }
}

/* Homepage hero (Oct 16): "Insight 360° OS" never breaks across two lines. */
.hero-360-brand { white-space: nowrap; }

/* Jump links (Oct 16): a section reached by #link stops below the fixed menu instead of under it.
   Zero specificity, so a page's own value (blog posts use 110px) still wins. */
:where([id]) { scroll-margin-top: 90px; }