/* =========================================================
   CA Website — Base Styles
   Theme: Navy + Gold, refined editorial-professional look.
   Design system: CSS custom properties below control color,
   spacing and elevation site-wide — change values here, not
   in individual pages.
   ========================================================= */

:root {
  /* Core palette */
  --navy: #0c2a4d;
  --navy-dark: #071a30;
  --navy-deeper: #051222;
  --ink: #18202c;
  --gold: #bd8f3f;
  --gold-light: #e7c98a;
  --gold-dark: #96702c;

  /* Text */
  --text: #333c49;
  --text-light: #6b7686;
  --text-on-dark: #cdd7e4;
  --text-on-dark-strong: #ffffff;

  /* Surfaces */
  /* Phase 50 (2026-09-11): the user felt the site's plain-white sections
     (About, Team, and every other page that falls back to this base
     surface) read as flat/empty next to the textured bands added earlier
     this session. Swapped pure white for a warm pale-yellow — still reads
     as a light surface, but carries the gold accent through the whole
     page rather than resetting to stark white between sections. Phase 50b
     (same day): user asked for a more pronounced yellow — #f7f2d1. Phase
     50c (same day): user asked for a two-colour gradient wash instead of
     a flat fill — blue blended into that same pale-yellow. Reuses the
     Services section's sky blue (#c6dde3) so the new blend still pulls
     from a colour already established on the page, then fades into the
     pale-yellow at the opposite corner. Still light enough everywhere for
     --text (#333c49) to stay comfortably readable on top of it. */
  --bg: linear-gradient(135deg, #c6dde3 0%, #f7f2d1 100%);
  --bg-alt: #f6f8fb;
  --bg-alt-2: #eef2f7;
  --border: #e4e8ee;
  --border-dark: rgba(255, 255, 255, 0.12);

  /* Shape & elevation */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(12, 42, 77, 0.06);
  --shadow: 0 14px 34px -12px rgba(12, 42, 77, 0.18);
  --shadow-lg: 0 26px 60px -18px rgba(7, 26, 48, 0.28);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;

  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--gold-dark); }

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

ul, ol { padding-left: 1.25em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-body);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy-deeper);
  box-shadow: 0 10px 24px -8px rgba(189, 143, 63, 0.55);
}
.btn-primary:hover { color: var(--navy-deeper); box-shadow: 0 14px 30px -8px rgba(189, 143, 63, 0.65); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-dark); color: #fff; box-shadow: var(--shadow); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-deeper);
  color: var(--text-on-dark);
  font-size: 0.83rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(189, 143, 63, 0.25);
}
.topbar .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.topbar a { color: var(--text-on-dark); }
.topbar a:hover { color: var(--gold-light); }
.topbar span { margin-right: 22px; }
.topbar i { color: var(--gold); margin-right: 6px; width: 14px; text-align: center; }

/* ---------- Header / Nav ---------- */
header.site-header {
  /* Phase 74 (2026-09-15, user's explicit request): flat white instead of
     the gradient. */
  background: #fff;
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-deeper) 100%);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(7, 26, 48, 0.45);
}
/* Phase 44 (2026-09-10): the real CA-monogram logo file replaces the
   gradient "KC" initials badge. It's a wide mark (not square), so the
   logo variant drops the badge's box/shadow/padding and just lets the
   image scale to the same height the badge used to occupy — width
   follows the image's own aspect ratio instead of being forced into a
   square. Both states (default + scrolled-shrink) get their own rule so
   the higher-specificity ".is-scrolled .brand-mark" rule below can never
   squash it back to a fixed square width. */
.brand-mark.brand-mark--logo { width: auto; height: 44px; background: none; box-shadow: none; border-radius: 0; padding: 0; }
.brand-mark.brand-mark--logo img { height: 100%; width: auto; display: block; }
header.site-header.is-scrolled .brand-mark.brand-mark--logo { width: auto; height: 38px; }

.brand .name { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); font-weight: 700; display: block; line-height: 1.15; }
.brand .tagline { font-size: 0.72rem; color: var(--gold-dark); letter-spacing: 1.5px; text-transform: uppercase; display: block; font-weight: 600; margin-top: 2px; }

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
nav.main-nav a {
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  position: relative;
  padding: 6px 0;
}
nav.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right 0.2s ease;
}
nav.main-nav a.active::after,
nav.main-nav a:hover::after { right: 0; }
nav.main-nav a.active,
nav.main-nav a:hover { color: var(--navy); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--navy); cursor: pointer; }

@media (max-width: 900px) {
  /* Phase 81 (2026-09-15, user's explicit request): simple two-item
     mobile header — logo on the left, hamburger on the right. The "Get a
     Consultation" button is dropped from the header at this width (it's
     still reachable via Book a Consultation in the hero and Contact Us
     in the footer); an earlier attempt at logo-centered / CTA-left /
     hamburger-right was replaced per follow-up feedback the same day. */
  .nav-wrap { flex-wrap: wrap; }
  .nav-actions > a.btn { display: none; }
  .nav-toggle { display: block; }
  nav.main-nav { display: none; width: 100%; order: 3; }
  nav.main-nav.open { display: block; }
  nav.main-nav ul { flex-direction: column; gap: 0; padding: 10px 0; }
  nav.main-nav li { border-top: 1px solid var(--border); }
  /* Phase 81: items sat flush against the left edge with zero horizontal
     padding — added a small left margin. */
  nav.main-nav a { display: block; padding: 12px 0 12px 5px; }
  nav.main-nav a::after { display: none; }

  /* Phase 81: 2 rows instead of 4 across — Email (left) / Phone (right)
     on row 1, Time (left) / Login (right) on row 2. Replaces the old
     ".topbar span:first-child" rule, which only forced the first span
     onto its own line and never produced a real 2-row layout. */
  .topbar .container {
    flex-direction: column;
    align-items: stretch;
  }
  .topbar .container > div {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .topbar .container > div:first-child {
    flex-direction: row-reverse;
  }
  .topbar span {
    margin-right: 0;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(120% 140% at 100% 0%, #123b6b 0%, var(--navy) 42%, var(--navy-deeper) 100%);
  color: #fff;
  padding: 100px 0 90px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.hero .eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gold); display: inline-block; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 3.4vw, 2.9rem); margin-bottom: 20px; }
.hero h1 em { color: var(--gold-light); font-style: normal; }
.hero p.lead { font-size: 1.12rem; color: var(--text-on-dark); margin-bottom: 32px; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-badges { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 460px; }
.hero-badge {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.hero-badge .ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px;
  background: rgba(189, 143, 63, 0.18);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
}
.hero-badge .txt { font-size: 0.83rem; color: var(--text-on-dark-strong); font-weight: 600; line-height: 1.3; }

.hero-art { position: relative; height: 380px; }
.hero-art .panel {
  position: absolute;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}
.hero-art .panel-main { inset: 20px 40px 60px 0; }
.hero-art .chart { position: absolute; left: 26px; right: 46px; bottom: 90px; height: 120px; }
.hero-art .stat-chip {
  position: absolute;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 18px;
  color: var(--ink);
}
.hero-art .stat-chip .n { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--navy); line-height: 1; }
.hero-art .stat-chip .l { font-size: 0.72rem; color: var(--text-light); margin-top: 4px; }
.hero-art .chip-1 { top: 18px; right: 0; }
.hero-art .chip-2 { bottom: 24px; left: -8px; }
@media (max-width: 800px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 60px; }
  .hero-art { display: none; }
  .hero-badges { max-width: none; }
}

/* ---------- Section basics ---------- */
section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--bg-alt); }
.section-navy { background: var(--navy); color: var(--text-on-dark); }

/* Phase 78 (2026-09-15, explicit user request — the site owner supplied a
   pencil-sketch illustration of accounting/finance items — tax/GST binders,
   a calculator, charts, a laptop — mostly blank in the middle, artwork only
   near the edges) applied as a light textured backdrop. Originally used on
   three sections (About page's Approach band, Services page's card band,
   homepage's About band); Phase 80 (2026-09-15, explicit user request —
   "Services page originally looks better... remove all css we applied
   today") removed it from the Services page specifically, so the bare
   .sketch-bg rule that page used is gone and only the compound
   .section-alt.sketch-bg (About page) and .hp-about.sketch-bg (homepage,
   defined near its own section further down) remain. */
/* background-size is 100% auto, NOT cover: this particular illustration
   has its artwork clustered at the left/right edges with a wide blank gap
   down the middle, so a section that's much wider than it is tall (most of
   these are) would have `cover` crop symmetrically from the center and cut
   off exactly that edge artwork, leaving only the blank middle visible —
   confirmed live (2026-09-15, explicit user report — "background is not
   visible"). Locking the width to 100% guarantees both edges always show;
   only the top/bottom (mostly blank there too) ever gets cropped instead. */
:root { --sketch-bg-image: linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)), url('../img/backgrounds/sketch-finance-bg.jpg') center / 100% auto no-repeat; }
.section-alt.sketch-bg { background: var(--sketch-bg-image); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.section-head.left { text-align: left; margin: 0 0 40px; }
.section-head .kicker {
  display: inline-block;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.section-navy .section-head .kicker { color: var(--gold-light); }
.section-navy .section-head h2 { color: #fff; }
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.section-head p { color: var(--text-light); }
.section-navy .section-head p { color: var(--text-on-dark); }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--bg-alt-2); padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-strip .container { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.trust-strip .label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-light); white-space: nowrap; }
.trust-strip .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.trust-strip .pill i { color: var(--gold); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(189, 143, 63, 0.35); }
.card .icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-alt-2), var(--bg-alt));
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
.card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.card p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 14px; }
.card > a:last-child { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.card > a:last-child:hover { color: var(--gold-dark); }

/* ---------- Services page (Phase 58, 2026-09-14) ---------- */
.services-intro { max-width: 62ch; margin: -10px auto 32px; text-align: center; color: var(--text-light); font-size: 1.02rem; }
.service-highlights { list-style: none; padding: 0; margin: 0 0 16px; }
.service-highlights li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--text-light); margin-bottom: 7px; }
.service-highlights i { color: var(--gold-dark); margin-top: 3px; font-size: 0.75rem; }

/* Phase 59 (2026-09-14): 2-per-row service cards (grid-2 instead of
   grid-3) are wide enough to split into an icon/title column + content
   column, rather than stacking everything down a narrow strip with idle
   space to the right. */
/* Phase 62 (2026-09-14, user's explicit request — icons not centered
   vertically, make them bigger): align-items changed from flex-start to
   center so the head column (heading + icon) centers against the body
   column's full height instead of hugging the top of the card. */
.service-card {
  display: flex; gap: 24px; align-items: center; min-width: 0;
  /* Phase 92 (2026-10-02): min-width:0 fixes a real horizontal-scroll bug --
     .service-card is a .grid-2 grid item, and a flex container's default
     min-width:auto means it won't shrink below its content's min-content
     width (the highlight list text), so on narrower viewports the two
     cards forced the grid wider than the page and caused horizontal
     scrolling. This lets the card shrink to its fair 1fr share and wrap
     its text normally instead -- same fix already applied to .service-card-body. */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.3s ease;
  /* Phase 80 (2026-09-15, explicit user request — "Services page
     originally looks better... remove all css we applied today"): back to
     no background override here, same as before Phase 78/79 — the card
     falls back to plain white from .card's own base rule. The :hover rule
     below is unchanged and goes back to being a real, visible change again. */
}
/* Phase 69 (2026-09-14, user's explicit request — "same as we did in team
   members card, also change the color ... when we take the cursor"): same
   warm gold tint as the Our Team / homepage Services hovers. The icon
   badge itself stays navy-tinted on hover (Phase 61, below) — only the
   card's own background picks up the gold. */
.service-card:hover { background: linear-gradient(145deg, #fdf6ea, #f9edd6); }
.service-card-head { flex: 0 0 150px; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Phase 60 (2026-09-14, user's explicit request — heading first, icon
   below it): order swapped via flex `order` rather than markup, so the
   icon stays the semantically-first element in the HTML. */
.service-card-head .icon { order: 2; margin: 14px 0 0; }
.service-card-head h3 { order: 1; font-size: 1.05rem; margin: 0; }
/* Phase 61 (2026-09-14, user's explicit request — original graphic icons,
   no gold): these cards now hold a custom SVG image instead of a Font
   Awesome glyph, so the badge is sized up to let the artwork read clearly,
   and the hover tint is navy instead of the site-wide gold (.card:hover
   .icon below) since the user specifically asked to keep gold off these. */
.service-card-head .icon {
  width: 96px; height: 96px;
  border-radius: 20px;
  padding: 16px;
  box-sizing: border-box;
}
.service-card-head .icon img { width: 100%; height: 100%; display: block; }
/* Phase 70 (2026-09-14, user's explicit request — the dark navy hover
   was "so dark" it swallowed the icon artwork, which is drawn in navy/
   blue itself, killing contrast. Keeping the badge on its normal light
   background at all times fixes that; the card-level gold hover (Phase
   69) already provides the "cursor is here" feedback around it. */
.service-card:hover .service-card-head .icon { background: linear-gradient(145deg, var(--bg-alt-2), var(--bg-alt)); }
.service-card-body { flex: 1; min-width: 0; }
.service-highlights-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
@media (max-width: 700px) {
  .service-card { flex-direction: column; }
  .service-card-head { flex: none; flex-direction: row; text-align: left; align-items: center; gap: 14px; }
  /* Reset the desktop order swap: on mobile the icon sits beside the
     heading in its original left-to-right order, not stacked. */
  .service-card-head .icon { order: 0; margin: 0; width: 76px; height: 76px; padding: 12px; flex-shrink: 0; }
  .service-card-head h3 { order: 0; margin: 0; }
  .service-highlights-grid { grid-template-columns: 1fr; }
}

/* ---------- Team (Phase 54, 2026-09-14): row-wise, alternating layout —
   user's explicit request ("Show Listing Row wise", with a worked example
   of image-left/content-right then content-left/image-right). Replaces
   the previous .team-card grid entirely; team.php now renders
   .team-row / .team-row-photo / .team-row-content instead. */
.team-rows { display: flex; flex-direction: column; gap: 56px; }
/* Phase 55 (2026-09-14): user asked to shrink the row photos by 40% — the
   column width (and its mobile max-width below) is scaled to 60% of the
   Phase 54 values (220/320px -> 132/192px, 260px -> 156px). */
/* Phase 64 (2026-09-14, user's explicit request, with a hand-drawn example
   box around the C.K. Koul row): each member's photo + details now sits
   inside one rectangular card, matching the outline the user drew — not
   just the photo's own border as before. Hover swaps the border/background
   to the highlighted state and reverts automatically on mouse-out, since
   that's how :hover works — no separate "un-hover" rule needed. */
.team-row {
  display: grid;
  grid-template-columns: minmax(132px, 192px) 1fr;
  gap: 48px;
  align-items: center;
  padding: 32px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.team-row:hover {
  /* User asked for a hover color that fits the site's own palette: this
     page already accents in gold (role labels, the photo's gold-light
     outline), and it's the same warm gold glow other hovers on the site
     use (.btn-primary, .card border) — a navy/blue tint didn't match. */
  border-color: var(--gold);
  background: linear-gradient(145deg, #fdf6ea, #f9edd6);
  box-shadow: 0 14px 30px -10px rgba(189, 143, 63, 0.35);
}
.team-row-reverse { grid-template-columns: 1fr minmax(132px, 192px); }
.team-row-reverse .team-row-photo { order: 2; }
.team-row-reverse .team-row-content { order: 1; }
.team-row-photo {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius);
  background: linear-gradient(145deg, var(--bg-alt-2), var(--bg-alt));
  border: 3px solid #fff;
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-family: var(--font-display); font-size: 3rem; font-weight: 700;
}
.team-row-content h3 { margin-bottom: 2px; font-size: 1.4rem; }
.team-row-content .role { color: var(--gold-dark); font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.team-row-content .qual { color: var(--text-light); font-size: 0.88rem; margin-bottom: 14px; }
.team-row-content p { margin-bottom: 8px; }
@media (max-width: 720px) {
  .team-row, .team-row-reverse { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .team-row-photo, .team-row-reverse .team-row-photo { order: -1; max-width: 156px; margin: 0 auto; }
  .team-row-content, .team-row-reverse .team-row-content { order: 0; text-align: center; }
}

/* ---------- Stats ---------- */
/* Phase 49 (2026-09-11): the user felt this band looked "odd"/too plain
   right under the photo hero — a flat gradient with nothing behind it,
   unlike the hero above and the CTA/Our-Approach bands further down which
   all got some kind of textured background. .stats is homepage-only (see
   the Phase 45 note below), so it's safe to edit directly rather than
   needing a scoped modifier class. Reuses showcase-corporate.jpg (already
   in assets/images/home/) under a heavy navy overlay — heavy enough that
   it reads as texture, not a second obvious photo, and keeps the exact
   same effective navy/navy-deeper tone (and therefore the same text/icon
   contrast) as the flat gradient it replaces. */
.stats {
  position: relative;
  background:
    linear-gradient(120deg, rgba(12, 42, 77, 0.93) 0%, rgba(5, 18, 34, 0.95) 100%),
    url('../images/home/showcase-corporate.jpg') center 38% / cover no-repeat;
  color: #fff;
}
/* Phase 45 (2026-09-11): .stats is only ever used directly under the
   homepage hero, and the generic `section { padding: 84px 0 }` rule plus
   the hero's own 70px bottom padding left a very large gap between the
   banner and this "Established 1985 / 40+ / 4 / 3" row. Tightening just
   the top padding here — never the generic `section` rule other sections
   still rely on, and never the hero's own padding, which keeps its
   internal balance — closes that gap. */
.stats { padding-top: 30px; }
@media (max-width: 600px) { .stats { padding-top: 20px; } }
.stats .grid-4 { text-align: center; }
.stats .stat { padding: 6px; border-left: 1px solid rgba(255,255,255,0.12); }
.stats .grid-4 > div:first-child .stat,
.stats .stat:first-child { border-left: none; }
.stats .num { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; color: var(--gold-light); }
.stats .label { color: var(--text-on-dark); font-size: 0.88rem; margin-top: 4px; }
@media (max-width: 900px) { .stats .stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; } .stats .grid-4 > div:first-child .stat { border-top: none; } }
/* Phase 81 (2026-09-15, user's explicit request): "below the banner,
   showing 4 rows — for each, show 2 instead of 4." The shared .grid-4
   utility collapses to a single column under 600px (see the .grid rules
   above), which stacked all four stats into 4 rows on phones. This
   overrides that just for the stats band, at higher specificity, so it
   stays a clean 2x2 (1985/Established + 40+/Years of Excellence on row
   1, 4/Practice Areas + 3/Partners & Associates on row 2 — whatever order
   Admin -> Settings has them in) instead of collapsing further. */
@media (max-width: 600px) {
  .stats .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats .grid-4 > div:nth-child(2) .stat { border-top: none; }
}

/* ---------- Testimonials ---------- */
.testimonial { position: relative; padding-top: 40px; }
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 6px; left: 26px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  color: var(--gold-light);
  line-height: 1;
}
.testimonial .stars { color: var(--gold); margin-bottom: 10px; font-size: 0.85rem; }
.testimonial p { font-style: italic; color: var(--text); }
.testimonial .client { font-weight: 700; color: var(--ink); margin-top: 16px; font-style: normal; }
.testimonial .client-role { color: var(--text-light); font-size: 0.85rem; }

/* ---------- Blog ---------- */
.post-card .thumb {
  background: linear-gradient(145deg, var(--bg-alt-2), var(--bg-alt));
  border-radius: var(--radius) var(--radius) 0 0;
  height: 175px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dark); font-size: 2rem;
}
.post-card { padding: 0; overflow: hidden; }
.post-card .body { padding: 24px 26px; }
.post-meta { color: var(--gold-dark); font-size: 0.78rem; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.post-content { font-size: 1.04rem; }
.post-content img { border-radius: var(--radius); margin: 20px 0; }
/* Phase 52 (2026-09-14): About page "What Guides Our Work" — underline only
   the heading word(s) before the colon on each principle line (e.g.
   "Integrity" in "Integrity: ..."), leaving the description text after the
   colon in the normal body color/weight. */
/* Phase 52b (2026-09-14, user correction): the user only asked for a
   colored UNDERLINE on the heading word — the heading text itself should
   stay the normal black body color, not also turn blue. */
.value-heading { color: #000; text-decoration: underline; text-decoration-color: #1D3652; text-underline-offset: 5px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 20px; }
label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.9rem; color: var(--ink); }
input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(189, 143, 63, 0.15); }
textarea { resize: vertical; min-height: 130px; }

/* Password show/hide toggle — used on every password field site-wide
   (admin login, admin profile, admin clients, client portal login). */
.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.password-field .toggle-password {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-light);
  padding: 6px; font-size: 0.95rem; line-height: 1; border-radius: 4px;
}
.password-field .toggle-password:hover { color: var(--navy); }
.password-field .toggle-password:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.95rem; }
.alert-success { background: #e7f6ec; color: #1c6b34; border: 1px solid #b9e6c6; }
.alert-error { background: #fdecec; color: #a3231f; border: 1px solid #f5c2c0; }

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  position: relative;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deeper) 100%);
  color: #fff;
  padding: 58px 0;
  text-align: center;
  overflow: hidden;
}
.page-banner::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189,143,63,0.28), transparent 70%);
}
.page-banner h1 { color: #fff; margin-bottom: 8px; position: relative; }
.breadcrumb { color: var(--text-on-dark); font-size: 0.88rem; position: relative; }
.breadcrumb a { color: var(--gold-light); }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--navy-deeper);
  text-align: center;
  padding: 64px 0;
  overflow: hidden;
}
.cta h2 { color: var(--navy-deeper); }
.cta .btn-navy:hover { background: var(--navy-deeper); }

/* Phase 46 (2026-09-11): homepage-only CTA treatment. .cta is shared with
   about.php and services.php — both stay exactly as they were, still the
   gold band above, untouched. .hp-cta rides alongside .cta only on the
   homepage (index.php has class="cta hp-cta") and wins on equal source
   order because two classes beat one. The user didn't like the solid gold
   here and asked for a photo instead — this reuses the "hands reviewing a
   signed contract" photo that was already sitting in assets/images/home/
   unused (showcase-corporate.jpg), with the same kind of dark navy overlay
   the hero uses so the white heading/paragraph stay readable. The button
   switches to .btn-primary (gold) in index.php's markup, since the navy
   .btn-navy button used on the other two pages would disappear into a
   navy-toned background here. */
.cta.hp-cta {
  background:
    linear-gradient(120deg, rgba(5,18,34,0.90) 0%, rgba(12,42,77,0.84) 100%),
    url('../images/home/showcase-corporate.jpg') center 30% / cover no-repeat;
}
.cta.hp-cta h2 { color: #fff; }
.cta.hp-cta p { color: var(--text-on-dark); }

/* Phase 52 (2026-09-14): same "photo, not flat gold" treatment as
   .cta.hp-cta above, applied to the About page's CTA band (the one right
   above the footer). Uses showcase-audit.jpg instead of the homepage's
   showcase-corporate.jpg so the two bands don't repeat the identical photo
   within one browsing session. services.php's CTA band is untouched — it
   stays the plain gold .cta, matching what was actually asked for. */
.cta.about-cta {
  background:
    linear-gradient(120deg, rgba(5,18,34,0.90) 0%, rgba(12,42,77,0.84) 100%),
    url('../images/home/showcase-audit.jpg') center 40% / cover no-repeat;
}
.cta.about-cta h2 { color: #fff; }
.cta.about-cta p { color: var(--text-on-dark); }

/* Phase 57 (2026-09-14): same "photo, not flat gold" treatment as
   .cta.about-cta above, applied to the Services page's CTA band. Reuses
   hero-advisors.jpg (see services.php's own comment on this section for
   why) rather than repeating showcase-audit.jpg or showcase-corporate.jpg,
   which are already each spoken for as a CTA backdrop elsewhere. */
.cta.services-cta {
  background:
    linear-gradient(120deg, rgba(5,18,34,0.90) 0%, rgba(12,42,77,0.84) 100%),
    url('../images/home/hero-advisors.jpg') center 25% / cover no-repeat;
}
.cta.services-cta h2 { color: #fff; }
.cta.services-cta p { color: var(--text-on-dark); }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--navy-deeper); color: var(--text-on-dark); padding: 64px 0 0; }
footer.site-footer h4 { color: #fff; font-size: 1.02rem; font-family: var(--font-body); letter-spacing: 0.3px; }
footer.site-footer a { color: var(--text-on-dark); font-size: 0.92rem; }
footer.site-footer a:hover { color: var(--gold-light); }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; }
footer.site-footer li { margin-bottom: 10px; font-size: 0.92rem; }
footer.site-footer li i { color: var(--gold); margin-right: 8px; width: 14px; }
/* Phase 52 (2026-09-11): the footer's first column now leads with the
   firm's actual logo (reusing .brand-mark/.brand-mark--logo from the
   header) instead of restating the firm name and about text — recolored
   for the dark footer background and sized up slightly since it's the
   only thing carrying the brand in this column. */
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.footer-brand .brand-mark--logo { height: 54px; }
/* Phase 53 (2026-09-14): dedicated footer lockup logo (icon + name +
   tagline baked into one image, pre-colored for this dark background) —
   see includes/footer.php. Sized by height, same pattern as the header's
   .brand-mark--logo img, so it scales cleanly at any screen width. */
.footer-logo-full { height: 90px; width: auto; display: block; }
.footer-brand-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; display: block; line-height: 1.2; }
.footer-brand-tagline { font-size: 0.74rem; color: var(--gold-light); letter-spacing: 1.5px; text-transform: uppercase; display: block; font-weight: 600; margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 46px;
  padding: 20px 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(205, 215, 228, 0.7);
}

/* ---------- Tables (admin) ---------- */
table { width: 100%; border-collapse: collapse; background: #fff; }
table th, table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.92rem; }
table th { background: var(--bg-alt); color: var(--navy); font-weight: 700; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* =========================================================
   Phase 42 (2026-09-10) — Premium visual polish & animation
   system, per the user's explicit request: "Change the front
   look of website, so it look like designed by highly
   professional designer. excellent animation. I would also
   give images of staff.. so keep space for that."

   Everything below is purely additive on top of the design
   system above — no existing color/spacing token or markup
   contract changes, so every public page (they all already
   share the same .card / .grid / .section-head / .team-row /
   .stats / .testimonial / .post-card / .hero classes) picks
   this up automatically with zero per-page edits.

   Motion is driven by a small IntersectionObserver + scroll
   engine in assets/js/main.js; this file only defines the
   before/after states and keyframes. A visitor with JS
   disabled always sees the finished, fully-visible layout
   (the .cx-reveal hidden state is only ever applied BY that
   script, never baked into markup) and `prefers-reduced-motion`
   is respected throughout, so nobody gets motion forced on them.
   ========================================================= */

/* ---------- Scroll progress bar (injected by main.js) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  z-index: 999;
  transition: width 0.1s ease-out;
}

/* ---------- Sticky header: shrinks + gains depth once scrolled ---------- */
header.site-header { transition: box-shadow 0.3s ease; }
header.site-header.is-scrolled { box-shadow: var(--shadow); }
header.site-header.is-scrolled .nav-wrap { padding: 9px 0; }
.brand-mark, .brand .name { transition: all 0.3s ease; }
header.site-header.is-scrolled .brand-mark { width: 38px; height: 38px; font-size: 0.92rem; }
header.site-header.is-scrolled .brand .name { font-size: 1.18rem; }

/* ---------- Mobile nav: smooth slide-open instead of an instant show ---------- */
@media (max-width: 900px) {
  nav.main-nav {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
  }
  nav.main-nav.open { max-height: 480px; opacity: 1; }
}

/* ---------- Scroll-reveal engine ---------- */
.cx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.21,.85,.32,1), transform 0.7s cubic-bezier(.21,.85,.32,1);
  transition-delay: var(--cx-delay, 0s);
}
.cx-reveal.cx-in { opacity: 1; transform: translateY(0); }
.cx-reveal.cx-zoom { transform: scale(0.94); }
.cx-reveal.cx-zoom.cx-in { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .cx-reveal, .cx-reveal.cx-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Buttons: a subtle light sweep on hover ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* ---------- Hero: floating art, animated glow, draw-in chart ---------- */
.hero::after {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,201,138,0.18), transparent 70%);
  top: -160px; right: -120px;
  animation: cxFloatSlow 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cxFloatSlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16px, 22px) scale(1.06); }
}
.hero-art .panel-main { animation: cxFloatSlow 8s ease-in-out infinite; }
.hero-art .stat-chip { animation: cxFloatChip 6s ease-in-out infinite; }
.hero-art .chip-2 { animation-delay: 1.2s; }
@keyframes cxFloatChip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-art .chart polyline:first-child {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: cxDraw 2.2s 0.3s ease forwards;
}
@keyframes cxDraw { to { stroke-dashoffset: 0; } }

.hero .eyebrow, .hero h1, .hero p.lead, .hero-actions, .hero-badges {
  animation: cxRiseIn 0.8s ease both;
}
.hero .eyebrow { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.15s; }
.hero p.lead { animation-delay: 0.25s; }
.hero-actions { animation-delay: 0.35s; }
.hero-badges { animation-delay: 0.45s; }
@keyframes cxRiseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-art .panel-main, .hero-art .stat-chip,
  .hero .eyebrow, .hero h1, .hero p.lead, .hero-actions, .hero-badges,
  .page-banner::after, .page-banner h1, .breadcrumb, .cta::before {
    animation: none !important;
  }
  .hero-art .chart polyline:first-child { stroke-dashoffset: 0; }
}

/* ---------- Page banner (inner pages): subtle motion on load ---------- */
.page-banner::after { animation: cxFloatSlow 10s ease-in-out infinite; }
.page-banner h1 { animation: cxRiseIn 0.7s ease both; }
.breadcrumb { animation: cxRiseIn 0.7s 0.1s ease both; }

/* ---------- Cards: refined hover — icon lifts and warms to gold ---------- */
.card .icon { transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease; }
.card:hover .icon { transform: scale(1.1) rotate(-4deg); background: linear-gradient(145deg, var(--gold-light), var(--gold)); color: #fff; }

/* ---------- Team: a frame built to show off a real photo ----------
   The upload path (Admin -> Team -> photo) already fills this exact
   markup — nothing here changes what's rendered, only how it looks.
   A photo gets a soft grayscale-to-colour reveal + zoom on hover; the
   no-photo initials fallback gets a slow shimmer so an empty slot
   visibly reads as "reserved for a photo" rather than a dead end.
   Retargeted in Phase 54 from the old .team-card/.team-photo grid to the
   row layout's .team-row/.team-row-photo — same visual treatment. */
.team-row-photo { position: relative; overflow: hidden; transition: box-shadow 0.35s ease; }
/* Phase 68 (2026-09-14, user's explicit request, confirmed by screenshot
   that the cache-busting fix alone didn't change anything — this really
   was a crop issue): default object-fit:cover crops evenly top and
   bottom, which was cutting into foreheads/turbans in this page's square
   frame. object-position anchors the crop to the top of each source
   photo so nothing is ever trimmed off the top of the head; any cropping
   now comes from the bottom (shoulders/chest) instead. */
.team-row-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease, filter 0.5s ease; filter: grayscale(15%); }
.team-row:hover .team-row-photo img { transform: scale(1.06); filter: grayscale(0%); }
.team-row:hover .team-row-photo { box-shadow: 0 0 0 6px rgba(189,143,63,0.18); }
.team-row-photo:not(:has(img)) {
  background: linear-gradient(120deg, var(--bg-alt-2) 25%, #fff 50%, var(--bg-alt-2) 75%);
  background-size: 220% 100%;
  animation: cxShimmer 3.2s ease-in-out infinite;
}
@keyframes cxShimmer { 0% { background-position: 0% 0; } 100% { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .team-row-photo:not(:has(img)) { animation: none; } }

/* ---------- Stats: tabular figures so an animated count-up never jitters ---------- */
.stats .num, .hero-art .stat-chip .n { font-variant-numeric: tabular-nums; }

/* ---------- Blog / testimonial: gentle zoom + quote-mark flourish ---------- */
.post-card .thumb img { transition: transform 0.5s ease; }
.post-card:hover .thumb img { transform: scale(1.06); }
.testimonial::before { transition: transform 0.3s ease; }
.testimonial:hover::before { transform: scale(1.15) rotate(-4deg); }

/* ---------- CTA band: soft moving glow ---------- */
.cta::before {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
  top: -140px; left: -80px;
  animation: cxFloatSlow 8s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- Back-to-top (injected by main.js) ---------- */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, visibility 0.3s;
  z-index: 60;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold-dark); }

/* =========================================================
   Phase 44 (2026-09-10) — Homepage rebuilt to match the layout
   reference the user supplied ("new layout... keep all sections like
   attached"). Replaces the Phase 43 full-bleed/diagonal-cut/sticky-scroll
   treatment with a calmer, more conventional section set: two-column
   hero, a real stats band, an about panel, the services grid, a
   4-step approach band and the team section. Every number and word
   below still comes from index.php's real data — this file only
   defines how it's presented. Scoped to homepage-only classes (hp-*)
   plus small additions to the shared .stats/.section-head components
   (used elsewhere too, so those additions are pure opt-in extras, not
   overrides) so every other public page stays untouched.
   ========================================================= */

.hp-hero h1,
.hp-about-text h2,
.hp-process-intro h2 { font-optical-sizing: auto; }

/* ================= HERO — two-column, real photo on the right ================= */
/* Phase 51 (2026-09-11): the user asked for this band to get the same
   "background image, not flat color" treatment already given to .stats
   and .cta.hp-cta. Only three real photos exist in assets/images/home/,
   and the other two (showcase-corporate.jpg, showcase-audit.jpg) are each
   already used twice elsewhere on this page, so this reuses the hero's
   own featured photo (hero-advisors.jpg) as an ambient, heavily-dimmed
   backdrop behind the sharp foreground crop of that same photo — reads as
   one extended scene rather than a third repeat of a different image.
   Same heavy navy overlay recipe as .stats/.cta so the white/gold text
   keeps its contrast unchanged. Phase 51b (same day): user asked for it
   a little lighter — eased both overlay stops down so more of the photo
   (and more overall brightness) comes through, while staying dark enough
   for the white h1 / gold-light accent text to stay easily legible. */
.hp-hero {
  position: relative;background: linear-gradient(115deg, rgba(4, 12, 24, 0.90) 0%, rgba(6, 20, 38, 0.72) 46%, rgba(6, 20, 38, 0.50) 100%), url("/assets/images/home/hero-bg.jpg") no-repeat center center / cover;
  padding: 70px 0;
  overflow: hidden;
}
.hp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.hp-hero-text .eyebrow {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 20px;
}
.hp-hero-text h1 {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'opsz' 144;
  letter-spacing: -0.02em; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.16;
  margin: 0 0 20px; color: #fff; text-wrap: balance;
}
.hp-hero-text h1 .accent { color: var(--gold-light); display: block; }
.hp-hero-text .lead { max-width: 44ch; color: var(--text-on-dark); font-size: 1.05rem; margin: 0 0 30px; }
.hp-hero-text .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hp-hero-photo { position: relative; }

.hp-hero-photo img { position: relative; z-index: 1; width: 100%; height: 400px; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow-lg); }
@media (max-width: 900px) {
  .hp-hero-grid { grid-template-columns: 1fr; }
  .hp-hero-photo { order: -1; max-width: 420px; margin: 0 auto; }
  .hp-hero-photo img { height: 260px; }
}
@media (max-width: 600px) { .hp-hero { padding: 50px 0; } }

/* ================= STATS BAND (shared .stats component, homepage adds icons) ================= */
.stats .stat-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(231,201,138,0.45);
  color: var(--gold-light); display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; margin: 0 auto 12px;
}

/* ================= Section head with a link on the same row (services/team "View all") ================= */
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-head-row .section-head { text-align: left; margin: 0; max-width: 620px; }
.section-head-row > a.view-all { font-weight: 700; color: var(--navy); white-space: nowrap; padding-bottom: 6px; }
.section-head-row > a.view-all:hover { color: var(--gold-dark); }

/* ================= ABOUT — text + real photo with a floating tagline card ================= */
.hp-about { padding: 92px 0; background: var(--bg); position: relative; overflow: hidden; }
/* Phase 78 (2026-09-15, explicit user request): the sketch-illustration
   backdrop (see .sketch-bg / --sketch-bg-image near the top of this file)
   applied to the homepage's "About Us / What we do" band. Compound
   selector so it outranks the plain .hp-about background above.
   A stronger white wash than the shared --sketch-bg-image default, NOT
   the same value: on the Services page and About page's Approach band the
   sketch sits behind a solid-white .card, so body text never touches it
   directly. Here .hp-about-text has no such card — the paragraph sits
   right on this background — and the live result at the shared, lighter
   wash put the sketch's bold "TAX AUDIT"/"GST" binder labels directly
   behind that paragraph, competing with it (explicit user report: "opps
   its too much"). A heavier wash keeps the sketch as a faint texture
   specifically where real body text sits unprotected. */
.hp-about.sketch-bg {
  background:
    linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
    url('../img/backgrounds/sketch-finance-bg.jpg') center / 100% auto no-repeat;
}
/* Phase 50 (2026-09-11): a soft warm glow in the corner so this band reads
   as considered rather than a flat leftover white gap — same pointer-events
   none / z-index layering trick as .hp-process-bg above, just a blurred
   color wash instead of icons since there's no symbol that fits "about". */
.hp-about::before {
  content: '';
  position: absolute;
  top: -160px; right: -140px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(231, 201, 138, 0.32) 0%, rgba(231, 201, 138, 0) 68%);
  pointer-events: none;
  z-index: 0;
}
.hp-about-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hp-about-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 18px; }
.hp-about-text h2 .accent { color: var(--gold-dark); display: block; }
.hp-about-text p { color: var(--text-light); margin-bottom: 26px; max-width: 54ch; }
.hp-about-media { position: relative; }
.hp-about-media::before {
  content: ''; position: absolute; right: -20px; bottom: -20px; width: 88%; height: 88%;
  background: var(--gold-light); opacity: 0.5; border-radius: 14px; z-index: 0;
}
.hp-about-media img { position: relative; z-index: 1; width: 100%; height: 360px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }
.hp-about-card {
  position: absolute; z-index: 2; left: -24px; bottom: -26px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 20px 24px; max-width: 230px;
}
.hp-about-card p { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.hp-about-card .line { width: 34px; height: 3px; background: var(--gold); margin-top: 12px; border-radius: 2px; }
@media (max-width: 900px) { .hp-about-grid { grid-template-columns: 1fr; } .hp-about-media { margin-top: 10px; } .hp-about-card { left: 16px; bottom: -22px; } }
@media (max-width: 600px) {
  .hp-about { padding: 60px 0 76px; }
  .hp-about-card { position: static; margin-top: 20px; max-width: none; }
  .hp-about-media::before { display: none; }
}

/* ================= OUR APPROACH — 4-step band with a connecting line ================= */
.hp-process {
  position: relative;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deeper) 100%);
  color: #fff;
  padding: 86px 0;
  overflow: hidden;
}
/* Phase 48 (2026-09-11): the user asked for this band to get the same kind
   of "textured background" treatment as the CTA band (which uses a photo
   under a dark overlay), but with a law/audit symbol instead of a photo of
   people. Rather than a stock photo (this environment can't fetch one),
   this scatters a few large, very low-opacity Font Awesome icons — the
   scales of justice, an invoice/ledger, an audit magnifying glass — as a
   faint watermark texture sitting behind the content. Purely decorative
   (aria-hidden, no interaction), so it degrades to nothing if icons ever
   fail to load. */
.hp-process-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hp-process-bg i { position: absolute; line-height: 1; }
.hp-process-bg i:nth-child(1) { top: -70px; right: 4%; font-size: 260px; color: rgba(231, 201, 138, 0.10); transform: rotate(-14deg); }
.hp-process-bg i:nth-child(2) { bottom: -60px; left: 3%; font-size: 190px; color: rgba(255, 255, 255, 0.06); transform: rotate(10deg); }
.hp-process-bg i:nth-child(3) { bottom: 6%; right: 20%; font-size: 130px; color: rgba(255, 255, 255, 0.055); transform: rotate(-8deg); }
@media (max-width: 900px) {
  .hp-process-bg i:nth-child(1) { font-size: 190px; }
  .hp-process-bg i:nth-child(3) { display: none; }
}
@media (max-width: 600px) {
  .hp-process-bg i:nth-child(1) { font-size: 140px; }
  .hp-process-bg i:nth-child(2) { font-size: 130px; }
}
.hp-process-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.85fr 1.35fr; gap: 50px; align-items: center; }
.hp-process-intro .kicker { color: var(--gold-light); }
.hp-process-intro h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 0 0 16px; text-wrap: balance; }
.hp-process-intro p { color: var(--text-on-dark); margin-bottom: 26px; max-width: 40ch; }
.hp-process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.hp-process-steps::before { content: ''; position: absolute; top: 25px; left: 12%; right: 12%; height: 1px; background: rgba(255,255,255,0.18); }
.hp-process-steps li { position: relative; text-align: center; padding: 0 12px; }
.hp-process-steps .step-icon {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy-deeper); border: 1.5px solid var(--gold);
  color: var(--gold-light); display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; margin: 0 auto 18px;
}
.hp-process-steps .step-n { font-family: var(--font-display); font-size: 0.8rem; color: var(--gold-light); margin-bottom: 6px; }
.hp-process-steps .step-label { font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 8px; }
.hp-process-steps .step-desc { font-size: 0.85rem; color: var(--text-on-dark); line-height: 1.5; }
@media (max-width: 900px) {
  .hp-process-grid { grid-template-columns: 1fr; }
  .hp-process-steps { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .hp-process-steps::before { display: none; }
}

/* ================= TEAM — intro + CTA left, portrait cards right (matches the
   user's layout reference exactly: rounded-square headshots in a row, not the
   full-width alternating rows the standalone /team page uses (Phase 54) —
   these hp-team-* classes stay homepage-only and never touch
   .team-row/.team-row-photo) ================= */
/* ================= SERVICES — homepage-only background tint =================
   .section-alt is shared with about.php, so it's never touched directly;
   this second class rides alongside it on the homepage's Services section
   only (index.php has class="section-alt hp-services") and wins on equal
   source order because it's more specific (two classes, not one). The
   fade-in itself reuses the site's existing cx-reveal/IntersectionObserver
   mechanism (assets/js/main.js), same as .hp-about/.hp-process/.hp-team —
   .hp-services was added to that script's targets list. */
.section-alt.hp-services { background: #c6dde3; }
/* Phase 65 (2026-09-14, user's explicit request — "add color in this
   section same as in Our Team, when we take the cursor it will change the
   color"): scoped to this section's own cards (.hp-services .card) rather
   than the shared base .card:hover, since plain .card is also used on
   About, Contact and the service-detail sidebar and the user only asked
   about this homepage section. Same warm gold tint as the Our Team hover. */
.hp-services .card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.3s ease; }
.hp-services .card:hover { background: linear-gradient(145deg, #fdf6ea, #f9edd6); }

.hp-team { padding: 92px 0; background: var(--bg); position: relative; overflow: hidden; }
/* Phase 50 (2026-09-11): matching warm glow to .hp-about's, mirrored to the
   opposite corner so the two plain bands don't look identically stamped. */
.hp-team::before {
  content: '';
  position: absolute;
  bottom: -170px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(231, 201, 138, 0.28) 0%, rgba(231, 201, 138, 0) 68%);
  pointer-events: none;
  z-index: 0;
}
.hp-team-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.hp-team-intro h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 8px; }
.hp-team-intro .hp-team-lead { font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.hp-team-intro > p:not(.hp-team-lead) { color: var(--text-light); margin-bottom: 28px; max-width: 42ch; }
.hp-team-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-team-cards.hp-team-cards-1 { grid-template-columns: minmax(0, 220px); }
.hp-team-cards.hp-team-cards-2 { grid-template-columns: repeat(2, 1fr); }
.hp-team-card {
  background: var(--bg-alt); border-radius: var(--radius);
  padding: 10px 10px 20px; text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
/* Phase 66 (2026-09-14, user's explicit request — "when we take the
   cursor on this team member the card should be pop-up and change
   color"): lift + shadow ("pop-up") plus the same warm gold tint used on
   the Our Team page and the homepage Services cards, for one consistent
   hover language across the site. */
.hp-team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  background: linear-gradient(145deg, #fdf6ea, #f9edd6);
}
.hp-team-photo {
  width: 100%; aspect-ratio: 4 / 4.6; border-radius: 10px; overflow: hidden;
  background: linear-gradient(145deg, var(--bg-alt-2), var(--bg-alt));
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.hp-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-team-photo span { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--navy); }
.hp-team-card h3 { margin: 0 0 10px 10px; font-size: 1.02rem; }
.hp-team-card .role { color: var(--gold-dark); font-weight: 600; font-size: 0.85rem; margin: -8px 0 3px 10px; }
.hp-team-card .qual { color: var(--text-light); font-size: 0.8rem; margin: 0 0 10px 10px; }
.hp-team-card .line { width: 30px; height: 3px; background: var(--gold); border-radius: 2px; margin-left: 10px; }
@media (max-width: 900px) {
  .hp-team-grid { grid-template-columns: 1fr; }
  .hp-team-cards { margin-top: 8px; }
}
@media (max-width: 600px) {
  .hp-team { padding: 60px 0 70px; }
  .hp-team-cards, .hp-team-cards.hp-team-cards-2 { grid-template-columns: 1fr 1fr; }
  .hp-team-cards.hp-team-cards-1 { grid-template-columns: minmax(0, 220px); }
}
@media (max-width: 420px) {
  .hp-team-cards, .hp-team-cards.hp-team-cards-2, .hp-team-cards.hp-team-cards-3 { grid-template-columns: 1fr; }
}