/* ==========================================================================
   SRPG & Company — Chartered Accountants
   Brand stylesheet. Palette derived from the CA India logo:
   ICAI Blue (primary) · Saffron (accent) · Green (accent) · White (base)
   --------------------------------------------------------------------------
   WORDPRESS NOTE: this file maps 1:1 to the theme stylesheet. All colours,
   spacing and radii are CSS custom properties in :root — change them once
   here (or expose them in the WP Customizer) to re-skin the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from the CA India logo */
  --blue-900: #0B2545;
  --blue-800: #10315C;
  --blue-700: #143D73;
  --blue-600: #1B4D8F;   /* primary ICAI blue */
  --blue-500: #2A62A8;
  --blue-300: #7FA3CE;
  --blue-100: #DEE8F5;
  --blue-050: #F2F6FC;

  --saffron-700: #C25E0C;
  --saffron-600: #E8770F;
  --saffron-500: #F58220;  /* logo saffron */
  --saffron-300: #FBB577;
  --saffron-100: #FDEBDB;

  --green-700: #3B8A2C;
  --green-600: #4CA637;
  --green-500: #5FB446;    /* logo green */
  --green-300: #A6DB95;
  --green-100: #E8F6E3;

  /* Neutrals */
  --ink-900: #0A1628;
  --ink-700: #1F2E45;
  --ink-500: #4A5A73;
  --ink-400: #6B7B94;
  --ink-300: #97A5B8;
  --line: #E2E8F1;
  --line-soft: #EEF2F8;
  --surface: #FFFFFF;
  --surface-alt: #F6F8FC;
  --surface-tint: #F0F4FA;

  /* Semantic */
  --c-tds: #6D4AA8;
  --c-incometax: var(--saffron-500);
  --c-gst: var(--green-600);
  --c-roc: var(--blue-600);
  --c-labour: #0E8F8F;
  --c-other: var(--ink-400);

  /* Type */
  --font-head: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10, 22, 40, .06);
  --shadow-sm: 0 2px 8px rgba(10, 22, 40, .06);
  --shadow-md: 0 10px 30px rgba(10, 22, 40, .08);
  --shadow-lg: 0 24px 60px rgba(10, 22, 40, .12);
  --shadow-blue: 0 18px 40px rgba(27, 77, 143, .18);

  --wrap: 1200px;
  --wrap-narrow: 880px;
  --header-h: 78px;        /* height of the navigation row only            */
  --header-total: 78px;    /* nav + ticker; measured and set by site.js    */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-total) + 20px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  /* Safe on BODY only — this value propagates to the viewport, so body does
     not become a scroll container and the sticky header keeps working.
     Never add this to `html` as well: that breaks `position: sticky`.
     Section 29 upgrades this to `overflow-x: clip` where supported. */
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
/* Safety default so an icon never renders at the SVG default 300x150.
   Every component rule below (.btn svg, .icon-box svg, …) overrides this. */
svg { width: 1em; height: 1em; flex: none; }
a { color: var(--blue-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--saffron-600); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--saffron-500); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink-900);
  margin: 0 0 .55em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.06rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink-900); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, var(--wrap-narrow)); margin-inline: auto; }
.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }
.section--alt { background: var(--surface-alt); }
.section--tint { background: linear-gradient(180deg, var(--blue-050), #fff); }
.section--ink { background: var(--blue-900); color: #C9D6E8; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.stack-sm > * + * { margin-top: 10px; }

@media (max-width: 980px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .wrap, .wrap-narrow { width: calc(100% - 32px); }
}

/* --------------------------------------------------------------------------
   4. SECTION HEADINGS / EYEBROWS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg, var(--saffron-500), var(--green-500)); border-radius: 2px; }
.section--ink .eyebrow { color: var(--saffron-300); }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--ink-500); font-size: 1.06rem; }
.section--ink .sec-head p { color: #A9BDD6; }
.lede { font-size: 1.12rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-head); font-size: .93rem; font-weight: 600;
  border-radius: var(--r-pill);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .22s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg.i-arrow { transform: translateX(3px); }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-700); color: #fff; }
.btn-accent { background: var(--saffron-500); color: #fff; box-shadow: 0 16px 34px rgba(245, 130, 32, .28); }
.btn-accent:hover { background: var(--saffron-600); color: #fff; }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink-900); background: #fff; }
.btn-ghost:hover { border-color: var(--blue-600); color: var(--blue-600); }
.btn-light { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.btn-light:hover { background: #fff; color: var(--blue-900); }
.btn-sm { padding: 10px 18px; font-size: .84rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  color: var(--blue-600);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--blue-900); color: #B9CBE2;
  font-size: .8rem; letter-spacing: .01em;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 40px; }
.topbar a { color: #DCE7F5; }
.topbar a:hover { color: var(--saffron-300); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar-item svg { width: 14px; height: 14px; opacity: .8; }
.topbar .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 0 rgba(95,180,70,.6); animation: pulse 2.2s infinite; }
/* Both firm numbers, always visible in the top bar */
.topbar-phones { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.topbar-phones svg { width: 14px; height: 14px; opacity: .8; color: var(--saffron-500); }
.topbar-phones .sep { color: rgba(255,255,255,.28); }
@media (max-width: 460px) { .topbar-phones { font-size: .75rem; gap: 6px; } .topbar .wrap { gap: 10px; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(95,180,70,0); } 100% { box-shadow: 0 0 0 0 rgba(95,180,70,0); } }
@media (max-width: 860px) { .topbar-left .hide-sm, .topbar-right .hide-sm { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(10,22,40,.08); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); }

/* Brand lockup — CA India logo is used as supplied, never redrawn or recoloured */
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__logo { height: 46px; width: auto; object-fit: contain; }
.brand__rule { width: 1px; height: 34px; background: var(--line); }
.brand__text { display: flex; flex-direction: column; line-height: 1.14; }
.brand__name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--blue-900); letter-spacing: -.02em; white-space: nowrap; }
.brand__name em { font-style: normal; color: var(--saffron-500); }
.brand__sub { font-size: .6rem; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-400); font-weight: 600; white-space: nowrap; }
/* the footer and modal lockups keep the larger original scale */
.footer-brand .brand__name, .modal__head .brand__name { font-size: 1.24rem; }
.footer-brand .brand__sub, .modal__head .brand__sub { font-size: .655rem; letter-spacing: .21em; }

/* Segmented pill bar — every page is a button, the open page is filled in.
   Held inside one tinted track so the nav reads as a single object rather
   than nine loose links competing with the brand lockup. */
.nav-menu {
  display: flex; align-items: center; gap: 2px; list-style: none;
  padding: 4px; border-radius: var(--r-pill);
  background: var(--surface-alt); border: 1px solid var(--line-soft);
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: var(--r-pill);
  font-family: var(--font-head); font-size: .825rem; font-weight: 500;
  color: var(--ink-500); white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-menu > li > a:hover { background: #fff; color: var(--blue-600); box-shadow: var(--shadow-xs); }
.nav-menu > li > a .caret { width: 10px; height: 10px; opacity: .5; transition: transform .2s var(--ease); }
.nav-menu > li.is-open > a { background: #fff; color: var(--blue-600); box-shadow: var(--shadow-xs); }
.nav-menu > li.is-open > a .caret { transform: rotate(180deg); }

/* The page you are on */
.nav-menu > li.current > a {
  background: var(--blue-600); color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(27, 77, 143, .28);
}
.nav-menu > li.current > a .caret { opacity: .85; }
.nav-menu > li.current > a:hover { background: var(--blue-700); color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 8px; }
/* Compact secondary action — icon plus a short label */
.nav-cal {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-head); font-size: .82rem; font-weight: 500; color: var(--ink-700);
  white-space: nowrap; transition: .2s var(--ease);
}
.nav-cal svg { width: 15px; height: 15px; color: var(--saffron-500); }
.nav-cal:hover { border-color: var(--blue-300); color: var(--blue-600); background: var(--blue-050); }
.nav-cal.current { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.nav-cal.current svg { color: #FBB577; }
.nav-cta { padding: 10px 20px; font-size: .83rem; }
.nav-cta.current { background: var(--blue-900); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  min-width: 290px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  list-style: none;
}
.nav-menu > li.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown--wide { min-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dropdown a { display: block; padding: 10px 14px; border-radius: var(--r-sm); font-size: .875rem; color: var(--ink-700); }
.dropdown a strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--ink-900); }
.dropdown a span { font-size: .77rem; color: var(--ink-400); }
.dropdown a:hover { background: var(--blue-050); }
.dropdown a:hover strong { color: var(--blue-600); }

.nav-toggle { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line); align-items: center; justify-content: center; }
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1240px) {
  .nav-menu > li > a { padding: 9px 10px; font-size: .8rem; }
  .nav-cal span { display: none; }
  .nav-cal { padding: 10px 12px; }
}
@media (max-width: 1080px) {
  .nav-menu, .nav-actions .btn, .nav-cal { display: none; }
  .nav-toggle { display: flex; }
  .brand__logo { height: 44px; }
  .brand__name { font-size: 1.08rem; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: 1000;
  background: #fff; box-shadow: var(--shadow-lg);
  transform: translateX(102%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer__body { overflow-y: auto; padding: 12px 14px 30px; flex: 1; }
.drawer__body a { display: block; padding: 13px 12px; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 500; color: var(--ink-900); font-size: .95rem; }
.drawer__body a:hover, .drawer__body a.current { background: var(--blue-050); color: var(--blue-600); }
.drawer__body .sub a { padding-left: 26px; font-size: .87rem; font-weight: 400; color: var(--ink-500); }
.drawer__foot { padding: 18px 22px 26px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.scrim { position: fixed; inset: 0; background: rgba(10,22,40,.5); backdrop-filter: blur(2px); z-index: 999; opacity: 0; visibility: hidden; transition: .3s; }
.scrim.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--blue-900) 0%, var(--blue-700) 52%, var(--blue-600) 100%);
  color: #D8E4F2;
  padding: clamp(56px, 7vw, 92px) 0 clamp(70px, 8vw, 110px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 20%, #000 20%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; width: 620px; height: 620px; right: -180px; top: -220px;
  background: radial-gradient(circle, rgba(245,130,32,.28), transparent 62%);
  filter: blur(10px); pointer-events: none;
}
.hero__glow-green {
  position: absolute; width: 480px; height: 480px; left: -160px; bottom: -220px;
  background: radial-gradient(circle, rgba(95,180,70,.24), transparent 65%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(34px, 4.5vw, 64px); align-items: center; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 .grad {
  background: linear-gradient(96deg, var(--saffron-300) 10%, var(--green-300) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { font-size: clamp(1rem, .95rem + .3vw, 1.16rem); color: #B7CAE2; max-width: 620px; margin-bottom: 30px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px; border-radius: var(--r-pill); margin-bottom: 24px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: .78rem; letter-spacing: .04em; color: #DCE7F5;
}
.hero__badge b { background: var(--saffron-500); color: #fff; padding: 3px 10px; border-radius: var(--r-pill); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.13); }
.hero__trust div { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: #B7CAE2; }
.hero__trust svg { width: 17px; height: 17px; color: var(--green-300); flex: none; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

/* Hero side card — live compliance snapshot */
.snap {
  background: rgba(255,255,255,.97); border-radius: var(--r-xl);
  box-shadow: 0 32px 70px rgba(4, 16, 34, .38);
  overflow: hidden; color: var(--ink-700);
}
.snap__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 22px; background: linear-gradient(90deg, var(--blue-050), #fff);
  border-bottom: 1px solid var(--line);
}
.snap__head h3 { margin: 0; font-size: .98rem; display: flex; align-items: center; gap: 9px; }
.snap__head h3 svg { width: 18px; height: 18px; color: var(--blue-600); }
.snap__head span { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-400); font-weight: 600; }
.snap__list { list-style: none; }
.snap__list li { display: flex; gap: 14px; padding: 15px 22px; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.snap__list li:last-child { border-bottom: 0; }
.snap__date {
  flex: none; width: 54px; text-align: center; border-radius: var(--r-sm); padding: 7px 4px;
  background: var(--surface-alt); border: 1px solid var(--line);
}
.snap__date b { display: block; font-family: var(--font-head); font-size: 1.16rem; line-height: 1; color: var(--ink-900); }
.snap__date span { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-400); }
.snap__meta h4 { margin: 0 0 3px; font-size: .9rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-900); line-height: 1.4; }
.snap__meta p { margin: 0; font-size: .78rem; color: var(--ink-400); }
.snap__foot { padding: 14px 22px; background: var(--surface-alt); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.countdown { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: var(--blue-100); color: var(--blue-700); white-space: nowrap; }
.countdown.is-urgent { background: var(--saffron-100); color: var(--saffron-700); }
.countdown.is-today { background: #FDE2E2; color: #B3261E; }

/* --------------------------------------------------------------------------
   8. TICKER
   -------------------------------------------------------------------------- */
.ticker { background: var(--ink-900); color: #fff; overflow: hidden; position: relative; }
.ticker__inner { display: flex; align-items: center; }
.ticker__label {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 12px 20px; background: var(--saffron-500);
  font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 30px;
}
.ticker__label svg { width: 15px; height: 15px; }
.ticker__viewport { overflow: hidden; flex: 1; }
.ticker__track { display: flex; gap: 46px; white-space: nowrap; animation: marquee 46s linear infinite; padding-left: 20px; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track a { color: #D5E1F0; font-size: .85rem; display: inline-flex; align-items: center; gap: 9px; padding: 12px 0; }
.ticker__track a:hover { color: var(--saffron-300); }
.ticker__track .tag { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-xs); background: rgba(255,255,255,.12); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 26px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.card h3 { font-size: 1.08rem; margin-bottom: 9px; }
.card p { font-size: .91rem; color: var(--ink-500); margin-bottom: 0; }
.card__no { position: absolute; top: 20px; right: 24px; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--line-soft); line-height: 1; }
.card--link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }

.icon-box {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--blue-050); color: var(--blue-600);
  transition: transform .28s var(--ease);
}
.icon-box svg { width: 25px; height: 25px; }
.card:hover .icon-box { transform: scale(1.06) rotate(-3deg); }
.icon-box--saffron { background: var(--saffron-100); color: var(--saffron-600); }
.icon-box--green { background: var(--green-100); color: var(--green-700); }
.icon-box--blue { background: var(--blue-050); color: var(--blue-600); }

.card--accent { border-top: 3px solid var(--blue-600); }
.card--accent.t-saffron { border-top-color: var(--saffron-500); }
.card--accent.t-green { border-top-color: var(--green-500); }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tag-chip { font-size: .72rem; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-alt); color: var(--ink-500); border: 1px solid var(--line); }

/* Service list inside cards */
.tick-list { list-style: none; }
.tick-list li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: .9rem; color: var(--ink-500); }
.tick-list li:last-child { margin-bottom: 0; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 15px; border-radius: 50%;
  background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B8A2C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}
.section--ink .tick-list li { color: #A9BDD6; }

/* --------------------------------------------------------------------------
   10. STATS / KPI
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: #fff; padding: 30px 24px; text-align: center; }
.stat b { display: block; font-family: var(--font-head); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); font-weight: 700; color: var(--blue-600); line-height: 1; letter-spacing: -.03em; }
.stat b sup { font-size: .5em; color: var(--saffron-500); top: -.7em; }
.stat span { display: block; margin-top: 9px; font-size: .82rem; color: var(--ink-400); letter-spacing: .02em; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   11. SRPG ACROSTIC (brand pillars)
   -------------------------------------------------------------------------- */
.acrostic { display: grid; gap: 14px; }
.acro {
  display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 22px;
  padding: 20px 24px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  transition: .3s var(--ease);
}
.acro:hover { border-color: var(--blue-300); box-shadow: var(--shadow-sm); transform: translateX(5px); }
.acro__letter {
  font-family: var(--font-head); font-size: 3.1rem; font-weight: 700; line-height: 1;
  text-align: center; color: var(--blue-600); letter-spacing: -.04em;
}
.acro:nth-child(2) .acro__letter { color: var(--saffron-500); }
.acro:nth-child(3) .acro__letter { color: var(--green-600); }
.acro:nth-child(4) .acro__letter { color: var(--blue-800); }
.acro h4 { margin: 0 0 4px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-900); }
.acro p { margin: 0; font-size: .9rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   12. VISION / MISSION / VALUES
   -------------------------------------------------------------------------- */
.vm-card { padding: 34px 30px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; }
.vm-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--saffron-500), var(--green-500)); }
.vm-card .icon-box { width: 58px; height: 58px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value {
  display: flex; gap: 15px; align-items: flex-start; padding: 22px 20px;
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--line);
  transition: .28s var(--ease);
}
.value:hover { border-color: var(--saffron-300); background: linear-gradient(180deg, #fff, var(--saffron-100)); }
.value svg { width: 22px; height: 22px; color: var(--saffron-600); flex: none; margin-top: 2px; }
.value h4 { margin: 0 0 3px; font-size: .95rem; }
.value p { margin: 0; font-size: .84rem; color: var(--ink-500); }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   13. LEADERSHIP
   -------------------------------------------------------------------------- */
.partner {
  display: grid; grid-template-columns: 250px 1fr; gap: 34px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.partner__photo {
  background: linear-gradient(160deg, var(--blue-700), var(--blue-900));
  display: grid; place-items: center; padding: 34px 20px; text-align: center; color: #fff; position: relative;
}
.partner__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 15%, rgba(245,130,32,.3), transparent 60%); }
.partner__avatar {
  width: 118px; height: 118px; border-radius: 50%; background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center;
  font-family: var(--font-head); font-size: 2.2rem; font-weight: 600; color: #fff; margin: 0 auto 16px;
  position: relative; z-index: 2; overflow: hidden;
}
.partner__avatar img { width: 100%; height: 100%; object-fit: cover; }
.partner__photo h3 { color: #fff; margin: 0 0 4px; font-size: 1.15rem; position: relative; z-index: 2; }
.partner__photo span { font-size: .78rem; color: #A9C2DF; letter-spacing: .05em; position: relative; z-index: 2; }
.partner__body { padding: 32px 34px 32px 0; }
.partner__role { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--saffron-600); background: var(--saffron-100); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 14px; }
@media (max-width: 820px) { .partner { grid-template-columns: 1fr; } .partner__body { padding: 28px 26px; } }

/* --------------------------------------------------------------------------
   14. TABS / FILTERS
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-head); font-size: .84rem; font-weight: 500; color: var(--ink-500);
  transition: .2s var(--ease);
}
.chip:hover { border-color: var(--blue-300); color: var(--blue-600); }
.chip.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); }
.chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-300); flex: none; }
.chip.is-active .chip__dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.chip__count { font-size: .72rem; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-alt); color: var(--ink-400); }
.chip.is-active .chip__count { background: rgba(255,255,255,.2); color: #fff; }

.searchbox { position: relative; flex: 1; min-width: 220px; }
.searchbox svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--ink-300); }
.searchbox input {
  width: 100%; padding: 12px 16px 12px 42px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff; font: inherit; font-size: .9rem; color: var(--ink-900);
  transition: .2s var(--ease);
}
.searchbox input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-050); }

/* --------------------------------------------------------------------------
   15. LATEST UPDATES
   -------------------------------------------------------------------------- */
.update {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px;
  padding: 24px 26px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); transition: .28s var(--ease);
}
.update:hover { box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.update__date { text-align: center; border-right: 1px solid var(--line-soft); padding-right: 18px; }
.update__date b { display: block; font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--ink-900); line-height: 1; }
.update__date span { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-400); }
.update__date i { display: block; font-style: normal; font-size: .68rem; color: var(--ink-300); margin-top: 3px; }
.update h3 { font-size: 1.04rem; margin-bottom: 8px; }
.update p { font-size: .9rem; color: var(--ink-500); margin-bottom: 12px; }
.update__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .76rem; color: var(--ink-400); }
.update__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.update__meta > span svg { width: 14px; height: 14px; opacity: .7; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-xs); background: var(--blue-050); color: var(--blue-700);
}
.pill svg { width: 12px; height: 12px; }
.pill--direct { background: var(--saffron-100); color: var(--saffron-700); }
.pill--indirect { background: var(--green-100); color: var(--green-700); }
.pill--other { background: var(--blue-050); color: var(--blue-700); }
.pill--alert { background: #FDE2E2; color: #B3261E; }
@media (max-width: 620px) {
  .update { grid-template-columns: 1fr; gap: 14px; }
  .update__date { display: flex; align-items: baseline; gap: 8px; text-align: left; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 0 0 12px; }
  .update__date b { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   16. COMPLIANCE CALENDAR
   -------------------------------------------------------------------------- */
.cal-shell { display: grid; grid-template-columns: 1fr 372px; gap: 26px; align-items: start; }
@media (max-width: 1060px) { .cal-shell { grid-template-columns: 1fr; } }

.cal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 18px;
}
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav button { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); display: grid; place-items: center; background: #fff; transition: .2s; }
.cal-nav button:hover { background: var(--blue-050); border-color: var(--blue-300); color: var(--blue-600); }
.cal-nav svg { width: 17px; height: 17px; }
.cal-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--ink-900); min-width: 210px; text-align: center; }
.view-switch { display: flex; padding: 4px; background: var(--surface-alt); border-radius: var(--r-pill); border: 1px solid var(--line); }
.view-switch button { padding: 8px 16px; border-radius: var(--r-pill); font-family: var(--font-head); font-size: .82rem; font-weight: 500; color: var(--ink-500); }
.view-switch button.is-active { background: #fff; color: var(--blue-600); box-shadow: var(--shadow-xs); font-weight: 600; }

.cal-grid { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--blue-900); }
.cal-dow span { padding: 12px 6px; text-align: center; font-family: var(--font-head); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #A9C2DF; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day {
  min-height: 116px; padding: 9px 9px 10px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: #fff; text-align: left; display: flex; flex-direction: column; gap: 5px; transition: background .18s;
  position: relative;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:hover { background: var(--blue-050); }
.cal-day.is-muted { background: var(--surface-alt); color: var(--ink-300); }
.cal-day.is-weekend .cal-day__no { color: var(--ink-300); }
.cal-day.is-today { background: linear-gradient(180deg, var(--saffron-100), #fff); }
.cal-day.is-today .cal-day__no { background: var(--saffron-500); color: #fff; }
.cal-day.is-selected { box-shadow: inset 0 0 0 2px var(--blue-600); z-index: 2; }
.cal-day__no {
  font-family: var(--font-head); font-size: .82rem; font-weight: 600; color: var(--ink-700);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
}
.cal-ev {
  display: flex; align-items: center; gap: 6px; font-size: .7rem; line-height: 1.3;
  padding: 4px 7px; border-radius: var(--r-xs); background: var(--surface-alt);
  color: var(--ink-700); text-align: left; width: 100%; overflow: hidden;
}
.cal-ev b { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cal-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.is-revised { background: #FDE2E2; }
.cal-more { font-size: .66rem; color: var(--blue-600); font-weight: 600; text-align: left; padding-left: 4px; }
@media (max-width: 760px) {
  .cal-day { min-height: 74px; padding: 6px 5px; }
  .cal-ev span, .cal-more { display: none; }
  .cal-ev { justify-content: center; padding: 3px; }
  .cal-day__no { font-size: .75rem; width: 22px; height: 22px; }
}

.cal-side { display: grid; gap: 18px; position: sticky; top: calc(var(--header-total) + 18px); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel__head { padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.panel__head h3 { margin: 0; font-size: .98rem; display: flex; align-items: center; gap: 9px; }
.panel__head h3 svg { width: 17px; height: 17px; color: var(--blue-600); }
.panel__head p { margin: 4px 0 0; font-size: .78rem; color: var(--ink-400); }
.panel__body { padding: 8px 0; max-height: 460px; overflow-y: auto; }
.panel__body--pad { padding: 20px; }

.ev-item { display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); align-items: start; }
.ev-item:last-child { border-bottom: 0; }
.ev-item__d { text-align: center; }
.ev-item__d b { display: block; font-family: var(--font-head); font-size: 1.05rem; line-height: 1.1; color: var(--ink-900); }
.ev-item__d span { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); }
.ev-item h4 { margin: 0 0 4px; font-size: .875rem; font-family: var(--font-body); font-weight: 600; line-height: 1.42; }
.ev-item p { margin: 0; font-size: .78rem; color: var(--ink-400); }
.ev-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.cat-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-alt); color: var(--ink-500); }
.cat-tag b { width: 7px; height: 7px; border-radius: 50%; }
.form-tag { font-size: .67rem; font-family: var(--font-head); font-weight: 600; padding: 3px 8px; border-radius: var(--r-xs); background: var(--blue-900); color: #fff; letter-spacing: .03em; }
.revised-note { margin-top: 8px; font-size: .74rem; padding: 8px 11px; border-radius: var(--r-sm); background: #FFF4E5; border-left: 3px solid var(--saffron-500); color: var(--saffron-700); }
.revised-note s { color: var(--ink-400); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-500); }
.legend b { width: 10px; height: 10px; border-radius: 3px; }

.empty { padding: 40px 24px; text-align: center; color: var(--ink-400); font-size: .88rem; }
.empty svg { width: 38px; height: 38px; margin: 0 auto 12px; color: var(--line); }

/* Agenda / list view */
.agenda-month { margin-bottom: 26px; }
.agenda-month > h3 { font-size: 1rem; padding-bottom: 10px; border-bottom: 2px solid var(--line); margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   17. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.acc { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; margin-bottom: 12px; overflow: hidden; transition: .25s var(--ease); }
.acc.is-open { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
.acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 22px; text-align: left;
  font-family: var(--font-head); font-size: .98rem; font-weight: 500; color: var(--ink-900);
}
.acc__q:hover { color: var(--blue-600); }
.acc__ico { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-050); display: grid; place-items: center; flex: none; transition: .25s var(--ease); }
.acc__ico svg { width: 14px; height: 14px; color: var(--blue-600); }
.acc.is-open .acc__ico { background: var(--blue-600); rotate: 45deg; }
.acc.is-open .acc__ico svg { color: #fff; }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc__a > div { padding: 0 22px 22px; font-size: .92rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   18. TABLES (capability matrix)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table.matrix { width: 100%; border-collapse: collapse; min-width: 720px; }
table.matrix th, table.matrix td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .9rem; vertical-align: top; }
table.matrix thead th { background: var(--blue-900); color: #fff; font-family: var(--font-head); font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 0; }
table.matrix thead th:first-child { border-top-left-radius: 0; }
table.matrix tbody tr:hover { background: var(--blue-050); }
table.matrix td:first-child { font-weight: 600; color: var(--ink-900); }
table.matrix td svg { width: 18px; height: 18px; color: var(--green-600); }

/* --------------------------------------------------------------------------
   19. TIMELINE / PROCESS
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.steps::before { content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); }
.step { text-align: center; position: relative; }
.step__no {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--blue-600);
  font-family: var(--font-head); font-weight: 700; color: var(--blue-600); position: relative; z-index: 2;
}
.step:nth-child(2) .step__no { border-color: var(--saffron-500); color: var(--saffron-600); }
.step:nth-child(3) .step__no { border-color: var(--green-500); color: var(--green-700); }
.step h4 { font-size: .98rem; margin-bottom: 6px; }
.step p { font-size: .86rem; color: var(--ink-500); margin: 0; }
@media (max-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); } .steps::before { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   20. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(125deg, var(--blue-800), var(--blue-600) 70%, var(--blue-500));
  padding: clamp(38px, 5vw, 62px) clamp(28px, 5vw, 62px); color: #D8E4F2;
}
.cta-band::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(245,130,32,.35), transparent 62%); }
.cta-band::after { content: ""; position: absolute; width: 340px; height: 340px; left: -120px; bottom: -180px; background: radial-gradient(circle, rgba(95,180,70,.3), transparent 62%); }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #BFD2E8; max-width: 620px; }

/* --------------------------------------------------------------------------
   21. PAGE HEAD (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--blue-900), var(--blue-700));
  color: #C6D6EA; padding: clamp(46px, 6vw, 78px) 0 clamp(40px, 5vw, 62px);
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(ellipse 80% 90% at 80% 0%, #000, transparent 70%);
}
.page-head::after { content: ""; position: absolute; width: 460px; height: 460px; right: -140px; top: -200px; background: radial-gradient(circle, rgba(245,130,32,.24), transparent 62%); }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: #fff; margin-bottom: 14px; max-width: 900px; }
.page-head p { color: #A9C2DF; max-width: 700px; font-size: 1.06rem; margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .8rem; color: #89A6C7; margin-bottom: 18px; }
.crumbs a { color: #BDD2EA; }
.crumbs a:hover { color: var(--saffron-300); }
.crumbs svg { width: 13px; height: 13px; opacity: .6; }

/* --------------------------------------------------------------------------
   22. FORMS
   -------------------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-size: .82rem; font-weight: 600; color: var(--ink-900); margin-bottom: 7px; }
.field label span { color: var(--saffron-600); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
  font: inherit; font-size: .92rem; color: var(--ink-900); background: #fff; transition: .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-050); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: .8rem; color: var(--ink-400); margin-top: 14px; padding: 12px 15px; background: var(--surface-alt); border-radius: var(--r-sm); border-left: 3px solid var(--blue-300); }
.form-status { margin-top: 14px; padding: 13px 16px; border-radius: var(--r-sm); font-size: .88rem; display: none; }
.form-status.ok { display: block; background: var(--green-100); color: var(--green-700); border-left: 3px solid var(--green-600); }
.form-status.warn { display: block; background: var(--saffron-100); color: var(--saffron-700); border-left: 3px solid var(--saffron-500); }

.contact-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.contact-item:last-child { border-bottom: 0; }
.contact-item .icon-box { width: 44px; height: 44px; margin: 0; flex: none; }
.contact-item .icon-box svg { width: 20px; height: 20px; }
.contact-item h4 { margin: 0 0 4px; font-size: .92rem; }
.contact-item p, .contact-item a { margin: 0; font-size: .9rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   23. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--blue-900); color: #93AAC7; padding-top: clamp(46px, 6vw, 72px); position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--saffron-500) 0%, #fff 50%, var(--green-500) 100%); }
.footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1.25fr; gap: 40px; padding-bottom: 44px; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 20px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: #93AAC7; font-size: .89rem; }
.site-footer a:hover { color: var(--saffron-300); }
.footer-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.footer-brand img { height: 50px; width: auto; background: #fff; padding: 6px 9px; border-radius: var(--r-sm); }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__sub { color: #7793B4; }
.footer-about p { font-size: .87rem; color: #8DA5C3; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--saffron-500); flex: none; margin-top: 3px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: .8rem;
}
.footer-bottom p { margin: 0; }
.updated-stamp { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); font-size: .76rem; color: #B4C7DE; }
.updated-stamp svg { width: 13px; height: 13px; color: var(--green-500); }
.icai-note {
  margin-top: 6px; padding: 18px 22px; border-radius: var(--r-md);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  font-size: .78rem; color: #8DA5C3; line-height: 1.65;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   24. DISCLAIMER MODAL (ICAI good practice)
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; padding: 24px; background: rgba(6, 18, 36, .78); backdrop-filter: blur(6px); }
.modal.is-open { display: grid; }
.modal__box {
  width: min(620px, 100%); background: #fff; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); animation: rise .4s var(--ease);
  max-height: 90vh; display: flex; flex-direction: column;
}
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.98); } }
.modal__head { padding: 26px 30px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: center; }
.modal__head img { height: 48px; width: auto; object-fit: contain; }
.modal__head h3 { margin: 0; font-size: 1.1rem; }
.modal__title { margin: 0; padding: 18px 30px 0; font-size: 1.1rem; }
.modal__body { padding: 24px 30px; font-size: .89rem; color: var(--ink-500); overflow-y: auto; }
.modal__body ul { padding-left: 20px; margin: 0 0 14px; }
.modal__body li { margin-bottom: 8px; list-style: disc; }
.modal__foot { padding: 18px 30px 26px; border-top: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   25. UTILITIES & MOTION
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 18px; } .mb-3 { margin-bottom: 28px; }
.muted { color: var(--ink-400); font-size: .88rem; }
.hr { height: 1px; background: var(--line); border: 0; margin: 34px 0; }
.badge-soft { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--blue-050); color: var(--blue-700); font-size: .78rem; font-weight: 600; }
.badge-soft svg { width: 14px; height: 14px; }
.prose h3 { margin-top: 32px; }
.prose ul { padding-left: 20px; margin-bottom: 18px; }
.prose li { list-style: disc; margin-bottom: 9px; color: var(--ink-500); font-size: .95rem; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 800;
  width: 46px; height: 46px; border-radius: 50%; background: var(--blue-600); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-blue);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: .3s var(--ease);
}
.to-top.is-vis { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--saffron-500); }
.to-top svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   26. QUICK LINKS — government portals (home page)
   -------------------------------------------------------------------------- */
.qgroup { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: .28s var(--ease); }
.qgroup:hover { box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.qgroup__head { display: flex; align-items: center; gap: 13px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line-soft); }
.qgroup__head .icon-box { width: 42px; height: 42px; margin: 0; flex: none; }
.qgroup__head .icon-box svg { width: 20px; height: 20px; }
.qgroup__head h3 { margin: 0; font-size: 1rem; }
.qlist { list-style: none; padding: 6px 0 10px; }
.qlist li + li { border-top: 1px solid var(--line-soft); }
.qlist a { display: block; padding: 12px 22px; transition: background .18s var(--ease); }
.qlist a:hover { background: var(--blue-050); }
.qlist__label {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: .88rem; font-weight: 600; color: var(--ink-900);
}
.qlist a:hover .qlist__label { color: var(--blue-600); }
.qlist__ext { width: 13px; height: 13px; opacity: .35; }
.qlist a:hover .qlist__ext { opacity: .9; color: var(--saffron-500); }
.qlist__note { display: block; margin-top: 3px; font-size: .79rem; color: var(--ink-400); line-height: 1.5; }

/* --------------------------------------------------------------------------
   27. MEDIA LIBRARY — photos, videos, documents
   -------------------------------------------------------------------------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mtile {
  position: relative; display: block; padding: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-alt); transition: .3s var(--ease);
}
.mtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.mtile:hover { box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.mtile:hover img { transform: scale(1.05); }
.mtile__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 11px; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(6, 18, 36, .85));
  color: #fff; display: flex; flex-direction: column; gap: 2px;
}
.mtile__cap b { font-family: var(--font-head); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.mtile__cap i { font-style: normal; font-size: .7rem; color: #C2D3E8; }

/* Shown only when the image file cannot be found, so the cause is obvious */
.mtile__miss { display: none; }
.mtile.is-missing { border-color: var(--saffron-300); background: var(--saffron-100); }
.mtile.is-missing img, .mtile.is-missing .mtile__cap { display: none; }
.mtile.is-missing .mtile__miss {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  position: absolute; inset: 0; padding: 14px; text-align: center; color: var(--saffron-700);
}
.mtile__miss svg { width: 24px; height: 24px; }
.mtile__miss b { font-size: .82rem; }
.mtile__miss i { font-style: normal; font-size: .68rem; word-break: break-all; opacity: .85; }

.mvideo {
  display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: center; text-align: left;
  padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: .28s var(--ease); width: 100%;
}
.mvideo:hover { box-shadow: var(--shadow-md); border-color: var(--blue-300); transform: translateY(-3px); }
.mvideo__thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(150deg, var(--blue-800), var(--blue-600)); flex: none;
}
.mvideo__thumb img, .mvideo__thumb video { width: 100%; height: 100%; object-fit: cover; }
.mvideo__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(6, 18, 36, .3); transition: background .25s var(--ease);
}
.mvideo__play svg { width: 40px; height: 40px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.mvideo:hover .mvideo__play { background: rgba(6, 18, 36, .12); }
.mvideo:hover .mvideo__play svg { color: var(--saffron-300); }
.mvideo__body { display: flex; flex-direction: column; gap: 5px; }
.mvideo__body b { font-family: var(--font-head); font-size: .98rem; color: var(--ink-900); line-height: 1.35; }
.mvideo__body span { font-size: .85rem; color: var(--ink-500); line-height: 1.55; }
.mvideo__body i { font-style: normal; font-size: .76rem; }
@media (max-width: 520px) { .mvideo { grid-template-columns: 1fr; } }

/* Lightbox — used by both photos and videos */
.lightbox {
  position: fixed; inset: 0; z-index: 1300; display: none; place-items: center; padding: 5vh 4vw;
  background: rgba(5, 14, 28, .92); backdrop-filter: blur(6px);
}
.lightbox.is-open { display: grid; }
.lightbox__body { max-width: 1000px; width: 100%; animation: rise .35s var(--ease); }
.lightbox__body > img { max-height: 74vh; width: auto; margin: 0 auto; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lightbox__video { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.lightbox__video iframe, .lightbox__video video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.lightbox__cap { margin-top: 16px; text-align: center; color: #DCE7F5; display: flex; flex-direction: column; gap: 4px; }
.lightbox__cap b { font-family: var(--font-head); font-size: 1.02rem; color: #fff; }
.lightbox__cap span { font-size: .85rem; color: #A9BDD6; }
.lightbox__close, .lightbox__nav {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; display: grid; place-items: center; transition: .2s var(--ease); z-index: 2;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--saffron-500); border-color: var(--saffron-500); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__close svg, .lightbox__nav svg { width: 19px; height: 19px; }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__prev { left: 18px; }
.lightbox__next { right: 18px; }
@media (max-width: 620px) {
  .lightbox__nav { top: auto; bottom: 18px; translate: none; }
  .lightbox__prev { left: 32%; } .lightbox__next { right: 32%; }
}

/* --------------------------------------------------------------------------
   28. STICKY TICKER — the headline strip is moved inside the sticky header by
   assets/js/site.js, so it stays visible while the page is scrolled.
   -------------------------------------------------------------------------- */
.site-header .ticker { border-top: 1px solid rgba(255, 255, 255, .08); }
.site-header:has(.ticker) { border-bottom: 0; }
/* The ticker sits after the navigation in the markup, so without this it
   would paint on top of the open dropdown menus. Lift the navigation row
   above it, and keep the ticker on the lowest layer of the header. */
.site-header > .wrap { position: relative; z-index: 3; }
.site-header > .ticker { position: relative; z-index: 1; }
.dropdown { z-index: 10; }
.site-header .ticker__track a { padding: 10px 0; }

/* --------------------------------------------------------------------------
   29. MOBILE HARDENING
   Stops any single element from making the page wider than the screen, which
   is what causes a phone to zoom out and the menu to look broken.
   -------------------------------------------------------------------------- */
/* IMPORTANT: never use `overflow-x: hidden` on html or body here.
   It turns them into a scroll container, which silently breaks
   `position: sticky` on the header. `overflow-x: clip` does the same
   sideways clipping WITHOUT creating a scroll container, so the sticky
   header keeps working. */
body { overflow-x: clip; max-width: 100%; }
body { word-break: break-word; overflow-wrap: anywhere; }
h1, h2, h3, h4 { overflow-wrap: break-word; }

@media (max-width: 900px) {
  /* the top bar must be allowed to wrap, or the phone numbers push the
     page sideways on a narrow screen */
  .topbar .wrap { flex-wrap: wrap; justify-content: center; gap: 2px 16px; padding-block: 6px; }
}
@media (max-width: 600px) {
  .topbar-left { display: none; }          /* keep the numbers, drop the strapline */
  .topbar-phones { font-size: .78rem; }
  .ticker__label { padding: 9px 24px 9px 14px; font-size: .64rem; letter-spacing: .08em; }
  .ticker__label svg { width: 13px; height: 13px; }
  .ticker__track { gap: 30px; }
  .ticker__track a { font-size: .78rem; }
  .snap__list li { padding: 13px 16px; gap: 10px; }
  .snap__head, .snap__foot { padding-inline: 16px; }
  .cal-title { min-width: 0; flex: 1; font-size: 1.05rem; }
  .searchbox { min-width: 0; }
}
@media (max-width: 430px) {
  /* the brand lockup is the widest fixed element in the bar — shrink it so
     the hamburger always has room and never falls off the screen */
  :root { --header-h: 66px; }
  .brand__logo { height: 36px; }
  .brand__rule { display: none; }
  .brand__name { font-size: .95rem; }
  .brand__sub { font-size: .53rem; letter-spacing: .13em; }
  .nav { gap: 10px; }
  .wrap, .wrap-narrow { width: calc(100% - 24px); }
}

/* Make the hamburger unmistakable on touch devices */
@media (max-width: 1080px) {
  .site-header .nav-toggle {
    border-color: var(--blue-300); background: var(--blue-050); color: var(--blue-700);
  }
  .site-header .nav-toggle:active { background: var(--blue-600); color: #fff; }
}

/* Print — clients frequently print or save the calendar and updates pages.
   A letterhead carrying the CA logo and firm details is printed at the top. */
.print-head { display: none; }
@media print {
  .site-header, .topbar, .ticker, .to-top, .site-footer, .modal, .cta-band,
  .page-head::before, .page-head::after { display: none !important; }
  body { color: #000; background: #fff; }
  .print-head {
    display: flex; align-items: center; gap: 16px;
    padding: 0 0 14px; margin-bottom: 20px; border-bottom: 2px solid var(--blue-600);
  }
  .print-head img { height: 56px; width: auto; object-fit: contain; }
  .print-head div { display: flex; flex-direction: column; line-height: 1.4; }
  .print-head strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--blue-900); }
  .print-head span { font-size: .72rem; color: #333; }
  .page-head { background: none !important; color: #000; padding: 0 0 10px; }
  .page-head h1 { color: #000; } .page-head p { color: #333; }
  .card, .panel, .cal-grid { box-shadow: none; break-inside: avoid; }
}