/* ==========================================================================
   Kingsley Accounting Group: Page & section styles
   Hero, home sections, service template, insights, post, resources, contact
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Home hero (video)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(620px, 88vh, 940px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--midnight);
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: saturate(1.08) contrast(1.04);
}
.hero__media img { z-index: 0; }
.hero__media video { z-index: 1; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__media video.is-ready { opacity: 1; }

/* Navy scrim, weighted left so the headline always clears the bright ocean */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(11,20,55,.94) 0%, rgba(11,20,55,.82) 30%, rgba(11,20,55,.5) 62%, rgba(11,20,55,.2) 100%),
    linear-gradient(to top, rgba(11,20,55,.72) 0%, transparent 42%);
}
/* Pink bloom bottom-right so brand color reads against the water */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(64% 58% at 92% 96%, rgba(240,86,143,.36) 0%, transparent 62%),
    radial-gradient(46% 40% at 6% 4%, rgba(76,111,255,.28) 0%, transparent 66%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(4.5rem, 3rem + 7vw, 7.5rem); }
.hero__panel { max-width: 810px; }

.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  letter-spacing: -.032em;
  line-height: 1.02;
  margin-bottom: 1.5rem;
}
.hero h1 .display-em { display: inline-block; }

.hero__lede {
  font-size: clamp(1.06rem, .98rem + .45vw, 1.28rem);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 58ch;
  margin-bottom: 2.2rem;
}

.hero__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.9rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: clamp(1.4rem, .8rem + 2.4vw, 3.2rem);
  margin-top: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  padding-top: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero__trust-item { min-width: 118px; }
.hero__trust-item b {
  display: block;
  font-family: var(--font-accent); font-weight: 700;
  font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.3rem);
  line-height: 1; color: #fff; letter-spacing: -.02em;
}
.hero__trust-item span { display: block; font-size: .81rem; color: rgba(255,255,255,.62); margin-top: .5rem; line-height: 1.4; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
  font-family: var(--font-accent); font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.hero__scroll:hover { color: #fff; }
.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent); }
@keyframes scrollPulse { 0%,100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(6px); opacity: 1 } }
.hero__scroll-line { animation: scrollPulse 2.4s ease-in-out infinite; }

/* Video muted-loop control */
.hero__vidbtn {
  position: absolute; right: clamp(1rem, .5rem + 1.6vw, 2.2rem); bottom: 1.8rem; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background .26s var(--ease);
}
.hero__vidbtn:hover { background: rgba(255,255,255,.24); color: #fff; }
.hero__vidbtn svg { width: 16px; height: 16px; }

@media (max-width: 780px) {
  .hero { min-height: auto; }
  .hero__inner { padding-block: clamp(3.4rem, 2rem + 8vw, 5rem); }
  .hero__scroll, .hero__vidbtn { display: none; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(11,20,55,.86) 0%, rgba(11,20,55,.78) 40%, rgba(11,20,55,.92) 100%);
  }
}

/* --------------------------------------------------------------------------
   2. Credential / trust strip
   -------------------------------------------------------------------------- */
.trust-strip { background: var(--paper); border-bottom: 1px solid var(--ink-08); padding-block: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.trust-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.trust-strip__label {
  font-family: var(--font-accent); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-48);
  flex: 0 0 auto; max-width: 22ch; line-height: 1.6;
}
.trust-strip__items { display: flex; align-items: center; gap: clamp(1rem, .5rem + 1.6vw, 2.2rem); flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; }
.trust-item { display: flex; align-items: center; gap: .62rem; color: var(--ink-64); font-size: .875rem; font-weight: 700; }
.trust-item svg { width: 21px; height: 21px; flex: none; color: var(--sapphire); }
.trust-item:nth-child(even) svg { color: var(--rose); }

/* --------------------------------------------------------------------------
   3. Split feature (image + copy)
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 1.2rem + 4vw, 5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__body h2 { margin-bottom: 1.15rem; }

/* isolation keeps the ::before glow (z-index:-1) inside this element. Without
   it the element is only a stacking context while its [data-reveal] transform
   is running, once that settles the glow escapes to the root and the section
   background paints over it, so it only ever showed mid-animation. */
.split__media { position: relative; isolation: isolate; }
.split__media img {
  width: 100%; border-radius: var(--r-xl);
  aspect-ratio: 4 / 3.35; object-fit: cover;
  box-shadow: var(--sh-lg);
}
.split__media::before {
  content: ""; position: absolute; inset: -14px -14px 40px 40px;
  border-radius: var(--r-xl); z-index: -1;
  background: var(--grad); opacity: .16; filter: blur(28px);
}

/* Floating stat card over the image */
.float-card {
  position: absolute; z-index: 2;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--ink-08);
  display: flex; align-items: center; gap: .9rem;
  max-width: 260px;
}
.float-card--bl { left: clamp(-1rem, -2vw, -2.2rem); bottom: clamp(1rem, 3vw, 2.4rem); }
.float-card--tr { right: clamp(-1rem, -2vw, -2.2rem); top: clamp(1rem, 3vw, 2.4rem); }
.float-card b { display: block; font-family: var(--font-accent); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--ink); }
/* Scoped to the text block. Unscoped, this also matched the .icon-tile, which
   is a <span>, and beat it on specificity, replacing its display:grid with
   display:block (so the tick sat flush to the top of the tile instead of
   centered) and its white with --ink-48 (dark ink on the dark gradient tile). */
.float-card > div span { display: block; font-size: .77rem; color: var(--ink-48); margin-top: .3rem; line-height: 1.35; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .float-card--bl { left: 1rem; }
  .float-card--tr { right: 1rem; }
}

/* --------------------------------------------------------------------------
   4. Services grid (home + overview)
   -------------------------------------------------------------------------- */
.svc-card { display: flex; flex-direction: column; height: 100%; }
.svc-card__cat {
  font-family: var(--font-accent); font-size: .655rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rose);
  margin-bottom: .55rem;
}
.svc-card h3 { font-size: var(--fs-h5); margin-bottom: .6rem; }
.svc-card p { flex: 1; font-size: .93rem; }
.svc-card__meta {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--ink-08);
}
.svc-card__meta span {
  font-size: .73rem; font-weight: 600; color: var(--ink-48);
  background: var(--ink-04); padding: .28rem .62rem; border-radius: var(--r-pill);
}

.svc-groups { display: flex; flex-direction: column; gap: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); }
.svc-group__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink-08); flex-wrap: wrap; }
.svc-group__head h2 { font-size: var(--fs-h3); }
.svc-group__head p { color: var(--ink-48); font-size: .93rem; flex: 1; min-width: 240px; }

/* --------------------------------------------------------------------------
   5. Feature cards / why-us
   -------------------------------------------------------------------------- */
.why-card { position: relative; overflow: hidden; }
.why-card__num {
  position: absolute; right: 1.1rem; top: .3rem;
  font-family: var(--font-display); font-size: 4.6rem; font-weight: 600;
  line-height: 1; color: var(--ink-04); pointer-events: none;
}
.why-card h3 { font-size: var(--fs-h5); }

/* --------------------------------------------------------------------------
   6. Process timeline
   -------------------------------------------------------------------------- */
.process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.process::before {
  content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
  background: var(--grad-line); opacity: .28; z-index: 0;
}
.process__step { position: relative; z-index: 1; text-align: center; }
.process__dot {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.35rem;
  display: grid; place-items: center;
  font-family: var(--font-accent); font-weight: 700; font-size: 1.06rem;
  color: #fff; background: var(--grad);
  box-shadow: 0 8px 22px rgba(35,64,184,.26), 0 0 0 7px var(--porcelain);
}
.process__step:nth-child(2) .process__dot { background: linear-gradient(135deg,#3B4FC4,#8B5FDF) }
.process__step:nth-child(3) .process__dot { background: linear-gradient(135deg,#6B4CE6,#DE5C9C) }
.process__step:nth-child(4) .process__dot { background: var(--grad-rev); box-shadow: 0 8px 22px rgba(240,86,143,.26), 0 0 0 7px var(--porcelain); }
.process__step h3 { font-size: var(--fs-h6); margin-bottom: .55rem; }
.process__step p { font-size: .9rem; color: var(--ink-64); }
.section--tint .process__dot { box-shadow: 0 8px 22px rgba(35,64,184,.26), 0 0 0 7px var(--paper); }

@media (max-width: 900px) {
  .process { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.4rem; }
  .process::before { display: none; }
}
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   7. Founder / bio block
   -------------------------------------------------------------------------- */
.founder { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.2rem, 1.2rem + 4vw, 5rem); align-items: center; }
.founder__media { position: relative; }
.founder__frame {
  position: relative; border-radius: var(--r-xl); padding: 12px;
  background: var(--grad);
  box-shadow: var(--sh-lg);
}
.founder__frame img {
  width: 100%; border-radius: calc(var(--r-xl) - 6px);
  aspect-ratio: 1 / 1.12; object-fit: cover; object-position: 50% 22%;
  background: var(--paper);
}
.founder__sig {
  position: absolute; right: -12px; bottom: -20px;
  background: var(--paper); border-radius: var(--r-md);
  padding: .9rem 1.2rem; box-shadow: var(--sh-lg); border: 1px solid var(--ink-08);
}
.founder__sig b { display: block; font-family: var(--font-display); font-size: 1.16rem; font-style: italic; color: var(--ink); }
.founder__sig span { display: block; font-family: var(--font-accent); font-size: .62rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--sapphire); margin-top: .28rem; }

.founder__quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.32rem, 1.1rem + 1.05vw, 1.85rem);
  line-height: 1.4; color: var(--ink); letter-spacing: -.018em;
  margin: 1.5rem 0; padding-left: 1.5rem;
  border-left: 3px solid transparent;
  border-image: var(--grad-line) 1;
}
.founder__creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.9rem 0; }
.founder__cred { display: flex; gap: .75rem; align-items: flex-start; }
.founder__cred svg { width: 19px; height: 19px; flex: none; margin-top: .2rem; color: var(--sapphire); }
.founder__cred b { display: block; font-size: .9rem; color: var(--ink); }
.founder__cred span { display: block; font-size: .8rem; color: var(--ink-48); margin-top: .1rem; }

@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; }
  .founder__media { max-width: 420px; }
  .founder__creds { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. Industries
   -------------------------------------------------------------------------- */
.ind-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  min-height: 268px; display: flex; align-items: flex-end;
  padding: 1.5rem; color: #fff;
  transition: transform .46s var(--ease-out), box-shadow .46s var(--ease-out);
}
/* These layers used to be z-index -2 / -1. The card is only a stacking context
   while its [data-reveal] animation is running (opacity/transform); the moment
   the reveal settles to opacity:1 + transform:none that context disappears, the
   negative layers escape to the root, and .section--tint's white background
   paints over them: the photo and scrim vanish and the card goes blank.
   Layering from 0 upwards keeps everything inside the card regardless. */
.ind-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .8s var(--ease-out); }
.ind-card > div { position: relative; z-index: 2; }
.ind-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11,20,55,.92) 0%, rgba(11,20,55,.55) 45%, rgba(11,20,55,.2) 100%);
  transition: background .46s var(--ease);
}
.ind-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.ind-card:hover img { transform: scale(1.07); }
.ind-card:hover::before { background: linear-gradient(to top, rgba(35,64,184,.92) 0%, rgba(107,76,230,.6) 45%, rgba(240,86,143,.3) 100%); }
/* h2 on industries.html (the cards sit directly under the h1) and h3 on
   index.html (where they sit under a section h2): same card either way. */
.ind-card h2, .ind-card h3 { color: #fff; font-size: var(--fs-h6); margin-bottom: .3rem; }
.ind-card p { color: rgba(255,255,255,.78); font-size: .84rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   9. Stats band
   -------------------------------------------------------------------------- */
.stats-band { position: relative; overflow: hidden; background: var(--midnight); }
.stats-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 70% at 8% 10%, rgba(35,64,184,.55) 0%, transparent 64%),
    radial-gradient(56% 68% at 92% 88%, rgba(240,86,143,.42) 0%, transparent 66%);
}
.stats-band > .container { position: relative; z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 1rem + 2vw, 3rem); }
.stat { text-align: center; }
.stat b {
  display: block; font-family: var(--font-accent); font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.9rem); line-height: 1;
  letter-spacing: -.03em; color: #fff;
}
.stat span { display: block; margin-top: .75rem; font-size: .875rem; color: rgba(255,255,255,.66); line-height: 1.45; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.13); }
@media (max-width: 780px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.4rem; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 420px) { .stats-grid { grid-template-columns: 1fr; } .stat { border-left: 0 !important; } }

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.tst-viewport { overflow: hidden; }
.tst-track { display: flex; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); transition: transform .62s var(--ease-out); }
.tst-card {
  flex: 0 0 calc((100% - 2 * clamp(1rem, .6rem + 1.4vw, 1.75rem)) / 3);
  min-width: 0;
  background: var(--paper); border: 1px solid var(--ink-08);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem);
  display: flex; flex-direction: column;
}
.tst-card__quote-mark { font-family: var(--font-display); font-size: 3.4rem; line-height: .8; margin-bottom: .5rem; }
.tst-card blockquote { font-size: 1.01rem; line-height: 1.68; color: var(--ink-80); flex: 1; }
.tst-card__stars { display: flex; gap: .16rem; margin-bottom: 1.1rem; color: var(--rose); }
.tst-card__stars svg { width: 15px; height: 15px; }
.tst-card__by { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--ink-08); }
.tst-card__by img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.tst-card__by b { display: block; font-size: .93rem; color: var(--ink); }
.tst-card__by span { display: block; font-size: .79rem; color: var(--ink-48); margin-top: .1rem; }

.tst-controls { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 2.4rem; }
.tst-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--ink-14); color: var(--ink);
  transition: all .26s var(--ease);
}
.tst-btn:hover:not(:disabled) { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--sh-glow-b); }
.tst-btn:disabled { opacity: .34; cursor: not-allowed; }
.tst-btn svg { width: 17px; height: 17px; }
/* The visible dot stays 8px, but the button itself is padded out to a 26x24
   hit area: an 8x8 control fails WCAG 2.5.8 (24x24 minimum), and hit areas
   have to be expanded rather than overlapped to satisfy it. */
.tst-dots { display: flex; gap: 0; }
.tst-dot { width: 26px; height: 24px; display: grid; place-items: center; background: none; border: 0; padding: 0; }
.tst-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-14); transition: all .3s var(--ease);
}
.tst-dot[aria-selected="true"]::before { width: 20px; border-radius: 4px; background: var(--grad-line); }

@media (max-width: 980px) { .tst-card { flex-basis: calc((100% - clamp(1rem,.6rem + 1.4vw,1.75rem)) / 2); } }
@media (max-width: 640px) { .tst-card { flex-basis: 100%; } }

/* --------------------------------------------------------------------------
   11. CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--midnight); }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad); opacity: .93;
}
.cta-band::after {
  content: ""; position: absolute; width: 640px; height: 640px; right: -180px; top: -240px;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 66%); border-radius: 50%;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 1.1rem; }
.cta-band p { color: rgba(255,255,255,.86); font-size: var(--fs-lg); max-width: 58ch; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.cta-band__inner > div:first-child { flex: 1 1 460px; }

.cta-quiet { background: var(--paper); border-top: 1px solid var(--ink-08); }
.cta-quiet h2 { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   12. Newsletter
   -------------------------------------------------------------------------- */
.newsletter {
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  padding: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
  background: var(--midnight);
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(35,64,184,.6), transparent 62%),
    radial-gradient(58% 76% at 96% 100%, rgba(240,86,143,.46), transparent 64%);
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: .8rem; }
.newsletter p { color: rgba(255,255,255,.74); max-width: 52ch; margin-bottom: 1.7rem; }
.newsletter .input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.newsletter .input::placeholder { color: rgba(255,255,255,.62); }
.newsletter .input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.16); background: rgba(255,255,255,.16); }
.newsletter .form-note { color: rgba(255,255,255,.66); }
/* The default sapphire link color measured 2.1:1 against the newsletter navy.
   On a dark panel the link carries white, and since links are not underlined
   sitewide it needs an explicit underline to stay distinguishable from the
   surrounding white note text. */
.newsletter .form-note a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.55);
  text-underline-offset: .18em;
}
.newsletter .form-note a:hover { color: #fff; text-decoration-color: #fff; }
.newsletter__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.8rem, 1rem + 3vw, 3.4rem); align-items: center; }
@media (max-width: 800px) { .newsletter__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   13. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--midnight);
  padding-block: clamp(3.4rem, 2.2rem + 5vw, 6.2rem);
  color: rgba(255,255,255,.76);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(62% 86% at 6% 4%, rgba(35,64,184,.62) 0%, transparent 64%),
    radial-gradient(56% 78% at 96% 96%, rgba(240,86,143,.44) 0%, transparent 66%);
}
.page-hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--grad-line);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin: 1.35rem 0 1.15rem; }
.page-hero .lede { color: rgba(255,255,255,.76); }
.page-hero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: center; }
.page-hero__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--sh-lg); }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero__media { display: none; } }

.page-hero__facts { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.16); }
.page-hero__facts div b { display: block; font-family: var(--font-accent); font-size: 1.42rem; font-weight: 700; color: #fff; line-height: 1; }
.page-hero__facts div span { display: block; font-size: .79rem; color: rgba(255,255,255,.6); margin-top: .42rem; }

/* --------------------------------------------------------------------------
   14. Service detail page
   -------------------------------------------------------------------------- */
.svc-layout { display: grid; grid-template-columns: 1fr 336px; gap: clamp(2rem, 1.2rem + 3.4vw, 4.2rem); align-items: start; }
@media (max-width: 1000px) { .svc-layout { grid-template-columns: 1fr; } }

.svc-aside { position: sticky; top: calc(var(--header-h) + 22px); display: flex; flex-direction: column; gap: 1.15rem; }
@media (max-width: 1000px) { .svc-aside { position: static; } }

.aside-card { background: var(--paper); border: 1px solid var(--ink-08); border-radius: var(--r-lg); padding: 1.6rem; }
.aside-card h3 { font-size: var(--fs-h6); margin-bottom: .9rem; }
.aside-card--grad { background: var(--grad); border-color: transparent; color: rgba(255,255,255,.86); position: relative; overflow: hidden; }
.aside-card--grad h3 { color: #fff; }
.aside-card--grad p { color: rgba(255,255,255,.84); font-size: .9rem; }
.aside-card--grad::after {
  content: ""; position: absolute; width: 230px; height: 230px; right: -90px; bottom: -110px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 66%); border-radius: 50%;
}
.aside-card--grad > * { position: relative; z-index: 1; }

.aside-links li + li { margin-top: .2rem; }
.aside-links a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .68rem .8rem; border-radius: var(--r-xs);
  font-size: .9rem; font-weight: 600; color: var(--ink-80);
  transition: background .22s, color .22s, transform .22s;
}
.aside-links a:hover { background: rgba(35,64,184,.06); color: var(--sapphire); transform: translateX(3px); }
.aside-links a svg { width: 14px; height: 14px; opacity: .5; flex: none; }
.aside-links a[aria-current="page"] { background: rgba(35,64,184,.08); color: var(--sapphire); }

.prose-block + .prose-block { margin-top: clamp(2.6rem, 1.8rem + 2.6vw, 4rem); }
.prose-block h2 { font-size: var(--fs-h3); margin-bottom: 1.15rem; }
.prose-block h3 { font-size: var(--fs-h5); margin: 2rem 0 .8rem; }
.prose-block p { margin-bottom: 1.1rem; }
.prose-block p:last-child { margin-bottom: 0; }

/* "Answer box": concise definition block, also the AI-search extraction target */
.answer-box {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.2vw, 1.9rem) clamp(1.4rem, 1rem + 1.2vw, 2rem);
  background: linear-gradient(140deg, rgba(35,64,184,.06), rgba(240,86,143,.06));
  border: 1px solid rgba(35,64,184,.14);
  margin-bottom: 2.2rem;
}
.answer-box::before {
  content: ""; position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 3px;
  border-radius: 3px; background: var(--grad-line);
}
.answer-box h2, .answer-box h3 {
  font-family: var(--font-accent); font-size: .69rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--sapphire);
  margin-bottom: .7rem;
}
.answer-box p { font-size: 1.04rem; line-height: 1.62; color: var(--ink-80); margin: 0; }
.answer-box p + p { margin-top: .8rem; }
.answer-box strong { color: var(--ink); }

.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.pain-item {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.1rem 1.2rem; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--ink-08);
  font-size: .945rem; color: var(--ink-64); line-height: 1.55;
}
.pain-item svg { width: 20px; height: 20px; flex: none; margin-top: .16rem; color: var(--rose); }
@media (max-width: 620px) { .pain-grid { grid-template-columns: 1fr; } }

.step-list { counter-reset: step; display: flex; flex-direction: column; gap: 1.1rem; }
.step-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.step-item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--font-accent); font-size: .84rem; font-weight: 700; color: #fff;
  background: var(--grad); box-shadow: 0 6px 16px rgba(35,64,184,.2);
}
.step-item h3 { font-size: var(--fs-h6); margin-bottom: .32rem; }
.step-item p { font-size: .93rem; color: var(--ink-64); margin: 0; }

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.tier { display: flex; flex-direction: column; position: relative; }
.tier--featured { border-color: transparent; box-shadow: var(--sh-md); }
.tier--featured::before { transform: scaleX(1); }
.tier__flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: .28rem .8rem; border-radius: var(--r-pill);
  background: var(--grad); color: #fff;
  font-family: var(--font-accent); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.tier h4 { font-size: var(--fs-h6); margin-bottom: .4rem; }
.tier__price { font-family: var(--font-accent); font-size: 1.85rem; font-weight: 700; color: var(--ink); line-height: 1; margin: .8rem 0 .3rem; }
.tier__price small { font-size: .78rem; font-weight: 600; color: var(--ink-48); letter-spacing: 0; }
.tier__for { font-size: .84rem; color: var(--ink-48); margin-bottom: 1.3rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--ink-08); }
.tier .check-list { flex: 1; }
.tier .check-list li { font-size: .885rem; margin-bottom: .68rem; padding-left: 1.85rem; }
.tier .check-list li::before { width: 19px; height: 19px; }
.tier .check-list li::after { left: 4.6px; top: 6.4px; width: 9.5px; height: 5px; }
.tier .btn { margin-top: 1.4rem; }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   15. Insights index
   -------------------------------------------------------------------------- */
.feat-post {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--paper); border: 1px solid var(--ink-08);
  box-shadow: var(--sh-md);
}
.feat-post__media { position: relative; min-height: 340px; }
.feat-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-post__body { padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.feat-post__body h2 { font-size: var(--fs-h3); margin: 1rem 0 .9rem; }
.feat-post__body h2 a { color: inherit; }
.feat-post__body h2 a:hover { color: var(--sapphire); }
@media (max-width: 880px) { .feat-post { grid-template-columns: 1fr; } .feat-post__media { min-height: 230px; } }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; font-size: .8rem; color: var(--ink-48); }
.post-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-28); }
.post-meta time { font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .48rem; }
.chip {
  padding: .55rem 1.05rem; border-radius: var(--r-pill);
  font-size: .845rem; font-weight: 700; color: var(--ink-64);
  border: 1.5px solid var(--ink-14); background: var(--paper);
  transition: all .26s var(--ease);
}
.chip:hover { border-color: var(--sapphire); color: var(--sapphire); }
.chip[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--sh-glow-b); }

.search-box { position: relative; min-width: 262px; flex: 0 1 320px; }
.search-box .input { padding-left: 2.85rem; }
.search-box svg { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-48); pointer-events: none; }
.search-clear { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; background: var(--ink-08); color: var(--ink-64); }
.search-box.has-value .search-clear { display: grid; }
.search-clear svg { position: static; transform: none; width: 12px; height: 12px; }

.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .82s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
/* Sits over the cover photo, and .post-card__media carries no scrim, so the
   pill's 10%-opacity tint let the image through and the rose text measured
   2.5–3.9:1 on every card (100% of pixels failing over the darker covers).
   #FDEEF4 is that same tint flattened onto white: identical intended look,
   but opaque, so contrast is 5.0:1 regardless of the photo behind it. */
.post-card__cat {
  position: absolute; left: .9rem; top: .9rem;
  background: #FDEEF4; border-color: rgba(240,86,143,.35);
}
.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: var(--fs-h6); line-height: 1.3; margin: .85rem 0 .6rem; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--sapphire); }
.post-card p { font-size: .9rem; flex: 1; }
.post-card__foot { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--ink-08); }
.post-card__foot img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.post-card__foot span { font-size: .79rem; color: var(--ink-48); }
.post-card[hidden] { display: none; }

.no-results { display: none; text-align: center; padding: 4rem 1rem; }
.no-results.is-visible { display: block; }
/* h2 on tax-calendar, h3 on insights: pinned so both empty states match. */
.no-results h2, .no-results h3 { font-size: var(--fs-h3); margin-bottom: .7rem; }

.load-more-wrap { text-align: center; margin-top: 3rem; }
.result-count { font-size: .85rem; color: var(--ink-48); font-family: var(--font-accent); }

/* --------------------------------------------------------------------------
   16. Blog post
   -------------------------------------------------------------------------- */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 1300;
  width: 0%; background: var(--grad-line);
  transition: width .1s linear;
}

.post-hero { position: relative; overflow: hidden; background: var(--midnight); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.post-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(64% 90% at 4% 0%, rgba(35,64,184,.6) 0%, transparent 64%),
    radial-gradient(58% 80% at 98% 100%, rgba(240,86,143,.44) 0%, transparent 66%);
}
.post-hero > .container { position: relative; z-index: 1; }
.post-hero h1 { color: #fff; margin: 1.15rem 0; max-width: 22ch; }
.post-hero .post-meta { color: rgba(255,255,255,.66); }
.post-hero .post-meta__dot { background: rgba(255,255,255,.4); }
.post-hero__by { display: flex; align-items: center; gap: .8rem; margin-top: 1.9rem; }
.post-hero__by img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.28); flex: none; }
.post-hero__by b { display: block; color: #fff; font-size: .95rem; }
.post-hero__by span { display: block; font-size: .8rem; color: rgba(255,255,255,.62); margin-top: .12rem; }

.post-cover { margin-top: -3.4rem; position: relative; z-index: 2; }
.post-cover img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 21/9; object-fit: cover; box-shadow: var(--sh-lg); }
.post-cover figcaption { font-size: .78rem; color: var(--ink-48); margin-top: .7rem; text-align: center; }

.post-layout { display: grid; grid-template-columns: 268px 1fr; gap: clamp(2rem, 1.2rem + 3.4vw, 4.4rem); align-items: start; }
@media (max-width: 1000px) { .post-layout { grid-template-columns: 1fr; } .post-side { position: static !important; order: -1; } }

.post-side { position: sticky; top: calc(var(--header-h) + 22px); display: flex; flex-direction: column; gap: 1.5rem; }
.toc h2, .share h2 {
  font-family: var(--font-accent); font-size: .655rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-48); margin-bottom: .85rem;
}
.toc { border-left: 2px solid var(--ink-08); padding-left: 1rem; }
.toc li + li { margin-top: .1rem; }
.toc a {
  display: block; padding: .42rem 0 .42rem .7rem; margin-left: -1.7rem;
  border-left: 2px solid transparent;
  font-size: .855rem; font-weight: 600; color: var(--ink-48); line-height: 1.42;
  transition: color .22s, border-color .22s;
}
.toc a:hover { color: var(--sapphire); }
.toc a.is-active { color: var(--sapphire); border-left-color: var(--sapphire); }

.share { display: flex; flex-direction: column; }
.share__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.share__btn {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  border: 1.5px solid var(--ink-14); color: var(--ink-64);
  transition: all .26s var(--ease);
}
.share__btn:hover { background: var(--grad); border-color: transparent; color: #fff; transform: translateY(-2px); }
.share__btn svg { width: 16px; height: 16px; }
.share__btn.is-copied { background: #0FA36B; border-color: transparent; color: #fff; }

/* Post prose */
.prose { max-width: 72ch; font-size: 1.075rem; line-height: 1.78; color: var(--ink-80); }
.prose > * + * { margin-top: 1.4rem; }
.prose h2 { font-size: var(--fs-h3); margin-top: 3rem; margin-bottom: -.2rem; scroll-margin-top: calc(var(--header-h) + 26px); }
.prose h3 { font-size: var(--fs-h5); margin-top: 2.2rem; margin-bottom: -.4rem; scroll-margin-top: calc(var(--header-h) + 26px); }
.prose h4 { font-size: var(--fs-h6); margin-top: 1.8rem; margin-bottom: -.5rem; }
.prose a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(35,64,184,.32); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--rose); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul li { list-style: none; position: relative; padding-left: .3rem; margin-bottom: .68rem; }
.prose ul li::before { content: ""; position: absolute; left: -1.1rem; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-line); }
.prose ol { list-style: decimal; }
.prose ol li { margin-bottom: .68rem; padding-left: .3rem; }
.prose ol li::marker { color: var(--sapphire); font-family: var(--font-accent); font-weight: 700; }
.prose hr { border: 0; height: 1px; background: var(--ink-08); margin: 2.6rem 0; }

.prose blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.18rem, 1.05rem + .6vw, 1.5rem); line-height: 1.46;
  color: var(--ink); letter-spacing: -.015em;
  padding: .4rem 0 .4rem 1.6rem;
  border-left: 3px solid transparent; border-image: var(--grad-line) 1;
  margin-block: 2.2rem;
}
.prose blockquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: .85rem; font-weight: 600; color: var(--ink-48); margin-top: .9rem; }

.callout {
  border-radius: var(--r-md); padding: 1.35rem 1.5rem;
  background: linear-gradient(140deg, rgba(35,64,184,.055), rgba(240,86,143,.055));
  border: 1px solid rgba(35,64,184,.14);
  font-size: .985rem; line-height: 1.68;
}
.callout > * + * { margin-top: .75rem; }
.callout__head { display: flex; align-items: center; gap: .6rem; font-family: var(--font-accent); font-size: .69rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--sapphire); }
.callout__head svg { width: 16px; height: 16px; }
.callout--warn { background: linear-gradient(140deg, rgba(240,86,143,.08), rgba(240,86,143,.03)); border-color: rgba(240,86,143,.24); }
.callout--warn .callout__head { color: #C9376C; }

.takeaways {
  border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
  background: var(--paper); border: 1px solid var(--ink-08); box-shadow: var(--sh-xs);
}
.takeaways h2 {
  font-family: var(--font-accent) !important; font-size: .69rem !important; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--sapphire);
  margin: 0 0 1rem !important;
}
.takeaways ul { padding-left: 0; }
.takeaways ul li { padding-left: 2rem; margin-bottom: .78rem; font-size: .985rem; }
.takeaways ul li::before {
  left: 0; top: .25em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--grad);
  -webkit-mask: none; mask: none;
}
.takeaways ul li::after {
  content: ""; position: absolute; left: 5px; top: 7px; width: 10px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}

.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose .table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--ink-08); }
.prose th, .prose td { padding: .85rem 1.05rem; text-align: left; border-bottom: 1px solid var(--ink-08); }
.prose th { font-family: var(--font-accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--ink-04); white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: rgba(35,64,184,.025); }
.prose figure img { border-radius: var(--r-md); width: 100%; }
.prose figcaption { font-size: .8rem; color: var(--ink-48); margin-top: .6rem; text-align: center; }

.post-tags { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--ink-08); }
.post-tags__label { font-family: var(--font-accent); font-size: .655rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-48); margin-right: .3rem; }
.tag { padding: .35rem .8rem; border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; background: var(--ink-04); color: var(--ink-64); border: 1px solid var(--ink-08); }
.tag:hover { background: rgba(35,64,184,.08); color: var(--sapphire); border-color: rgba(35,64,184,.18); }

/* Author bio */
.author-box { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 2.6rem; }
.author-box img { width: 88px; height: 88px; border-radius: var(--r-md); object-fit: cover; flex: none; }
.author-box h3 { font-size: var(--fs-h6); margin-bottom: .2rem; }
.author-box .role { font-family: var(--font-accent); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sapphire); margin-bottom: .8rem; }
.author-box p { font-size: .93rem; color: var(--ink-64); }
@media (max-width: 560px) { .author-box { flex-direction: column; gap: 1.1rem; } }

/* Prev / next */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; margin-top: 3rem; }
.post-nav a {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.4rem 1.6rem; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--ink-08);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}
.post-nav a:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.post-nav__dir { display: flex; align-items: center; gap: .4rem; font-family: var(--font-accent); font-size: .655rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-48); }
.post-nav__dir svg { width: 13px; height: 13px; }
.post-nav b { font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; color: var(--ink); line-height: 1.32; }
.post-nav a:hover b { color: var(--sapphire); }
.post-nav__next { text-align: right; }
.post-nav__next .post-nav__dir { justify-content: flex-end; }
@media (max-width: 620px) { .post-nav { grid-template-columns: 1fr; } .post-nav__next { text-align: left; } .post-nav__next .post-nav__dir { justify-content: flex-start; } }

/* --------------------------------------------------------------------------
   17. Resources
   -------------------------------------------------------------------------- */
.cal-table { width: 100%; border-collapse: collapse; font-size: .945rem; }
.cal-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--ink-08); background: var(--paper); }
.cal-table th, .cal-table td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--ink-08); vertical-align: top; }
.cal-table th { font-family: var(--font-accent); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink); background: var(--ink-04); white-space: nowrap; }
.cal-table tbody tr:last-child td { border-bottom: 0; }
.cal-table tbody tr:hover { background: rgba(35,64,184,.025); }
.cal-table tr[hidden] { display: none; }
.cal-date { font-family: var(--font-accent); font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-who { display: inline-flex; padding: .24rem .6rem; border-radius: var(--r-pill); font-size: .705rem; font-weight: 700; white-space: nowrap; }
.cal-who[data-who="business"]   { background: rgba(35,64,184,.09);  color: var(--sapphire); }
.cal-who[data-who="individual"] { background: rgba(240,86,143,.11); color: #BC2E62; }
.cal-who[data-who="payroll"]    { background: rgba(107,76,230,.1);  color: var(--violet); }
.cal-desc { color: var(--ink-64); font-size: .885rem; }

.guide-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.guide-card__media { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.guide-card:hover .guide-card__media img { transform: scale(1.06); }
.guide-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,20,55,.5), transparent 55%); }
/* The only .pill--light that sits over an uncontrolled photo. The .13 white
   wash left up to a third of the pixels behind it under 4.5:1 on lighter
   covers, so this one carries its own dark backing instead of relying on the
   image. White on this clears 5:1 even over a pure-white photo. */
.guide-card__fmt {
  position: absolute; right: .85rem; bottom: .85rem; z-index: 1;
  background: rgba(11,20,55,.62); border-color: rgba(255,255,255,.26);
}
.guide-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }

.faq-search { max-width: 480px; margin: 0 auto 2.6rem; }

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1.2rem + 3.4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-form-card { background: var(--paper); border: 1px solid var(--ink-08); border-radius: var(--r-xl); padding: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); box-shadow: var(--sh-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: 1.15rem; }
.info-card { background: var(--paper); border: 1px solid var(--ink-08); border-radius: var(--r-lg); padding: 1.7rem; }
.info-card--grad { background: var(--grad); border-color: transparent; color: rgba(255,255,255,.86); position: relative; overflow: hidden; }
.info-card--grad h3, .info-card--grad b { color: #fff; }
.info-card--grad::after { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; bottom: -120px; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 66%); border-radius: 50%; }
.info-card--grad > * { position: relative; z-index: 1; }
.info-card h3 { font-size: var(--fs-h6); margin-bottom: 1.15rem; }
.info-list li { display: flex; gap: .85rem; align-items: flex-start; }
.info-list li + li { margin-top: 1.05rem; padding-top: 1.05rem; border-top: 1px solid var(--ink-08); }
.info-card--grad .info-list li + li { border-top-color: rgba(255,255,255,.2); }
.info-list svg { width: 19px; height: 19px; flex: none; margin-top: .22rem; color: var(--sapphire); }
.info-card--grad .info-list svg { color: #fff; }
.info-list b { display: block; font-size: .88rem; color: var(--ink); margin-bottom: .16rem; }
.info-list span, .info-list a { font-size: .9rem; color: var(--ink-64); }
.info-list a { display: inline-flex; align-items: center; min-height: 24px; }
.info-card--grad .info-list span, .info-card--grad .info-list a { color: rgba(255,255,255,.84); }
.info-card--grad .info-list a:hover { color: #fff; }

.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink-08); background: var(--ink-04); }
.map-embed iframe { display: block; width: 100%; height: 300px; border: 0; }

/* --------------------------------------------------------------------------
   19. Legal / long-form
   -------------------------------------------------------------------------- */
.legal { max-width: 76ch; }
.legal h2 { font-size: var(--fs-h4); margin: 2.6rem 0 .9rem; }
.legal h3 { font-size: var(--fs-h6); margin: 1.7rem 0 .6rem; }
.legal p, .legal li { color: var(--ink-64); }
.legal p + p { margin-top: 1rem; }
.legal ul { margin: .9rem 0 .9rem 1.3rem; }
.legal ul li { list-style: disc; margin-bottom: .5rem; }
.legal__updated { font-family: var(--font-accent); font-size: .78rem; color: var(--ink-48); padding: .7rem 1.05rem; background: var(--ink-04); border-radius: var(--r-xs); display: inline-block; }

/* --------------------------------------------------------------------------
   20. 404
   -------------------------------------------------------------------------- */
.err { text-align: center; padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.err__code {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(6rem, 4rem + 12vw, 12rem); line-height: .9;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1rem;
}
.err__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2.4rem; }