/* ==========================================================================
   Pranab Sona — Website Redesign
   Single shared design system (Req 12.1)
   ==========================================================================
   This stylesheet is the single source of truth for the site's visual theme.
   Subsequent rules (fonts, reset, layout, components, responsive) are appended
   below this :root token block in later tasks (4.2–4.14).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens (CSS custom properties)
   --------------------------------------------------------------------------
   Colors — a deep-navy + warm-gold palette. All text/background pairings are
   chosen to meet WCAG AA contrast (Req 14.8):
     --color-text-primary  (#f5f6f8) on --color-navy-dark (#0d1b2a) ≈ 16.1:1
     --color-text-secondary(#c2c8d4) on --color-navy-dark (#0d1b2a) ≈ 10.4:1
     --color-text-primary  (#f5f6f8) on --color-navy-mid  (#1b2a4a) ≈ 13.2:1
     --color-text-secondary(#c2c8d4) on --color-navy-mid  (#1b2a4a) ≈  8.5:1
   All comfortably exceed the 4.5:1 body / 3:1 large-text thresholds.
   -------------------------------------------------------------------------- */
:root {
  /* --- Colors: navy surfaces --- */
  --color-navy-dark: #0d1b2a;   /* deepest navy — body background */
  --color-navy-mid: #1b2a4a;    /* mid navy — nav, footer, cards */
  --color-navy-light: #2a3a5a;  /* lighter navy surface */

  /* --- Colors: gold accents --- */
  --color-gold: #c8a24a;        /* primary gold accent */
  --color-gold-light: #e0bf6a;  /* lighter gold — hover */
  --color-gold-muted: #a9863a;  /* muted gold — badges */

  /* --- Colors: text --- */
  --color-text-primary: #f5f6f8;   /* primary light text (AA on navy) */
  --color-text-secondary: #c2c8d4; /* secondary grey text (AA on navy) */

  /* --- Typography: families --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Typography: sizes (rem; root = 16px so body ≥ 16px, Req 11.5) --- */
  --font-size-hero: clamp(2.25rem, 5vw, 3.5rem);
  --font-size-h1: clamp(1.875rem, 4vw, 2.5rem);
  --font-size-h2: clamp(1.5rem, 2.5vw, 1.875rem);
  --font-size-h3: 1.25rem;
  --font-size-body: 1rem;       /* 16px */
  --font-size-small: 0.875rem;  /* 14px */

  /* --- Typography: weights --- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Typography: line heights --- */
  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  /* --- Spacing scale (8px base) --- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* --- Layout --- */
  --container-max: 72rem;        /* ~1152px */
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;

  /* --- Transitions (≤ 200ms, Req 12.4/12.5) --- */
  --transition-fast: 120ms ease;
  --transition-base: 160ms ease;
}

/* --------------------------------------------------------------------------
   Self-hosted web fonts — Inter (SIL OFL)
   --------------------------------------------------------------------------
   Four weights are bundled locally as .woff2 and referenced with `../fonts/`
   relative paths (relative to this stylesheet at assets/css/) so no remote
   requests are made (Req 13.1, 13.3, 13.4). `font-display: swap` keeps text
   visible during font load and degrades cleanly to the system stack defined
   by --font-sans if the files are absent.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Base / reset styles
   --------------------------------------------------------------------------
   A light-touch reset built on the design tokens above. Establishes a
   predictable box model, removes default margins, applies the navy/gold
   theme to the document, and provides accessible focus + skip-link behaviour
   (Req 14.4, 14.5, 14.6). Body text is 16px (Req 11.5) and link hover
   transitions stay ≤ 200ms (Req 12.4, 12.5).
   -------------------------------------------------------------------------- */

/* 1. Universal box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margins/padding on common flow elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* 3. Smooth scrolling for in-page anchors (e.g. skip link) */
html {
  scroll-behavior: smooth;
}

/* 4. Document theme — navy background, light text, Inter, 16px body (Req 11.5) */
body {
  min-height: 100vh;
  background-color: var(--color-navy-dark);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);      /* 1rem = 16px */
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 5. Responsive media — never overflow their container (Req 11.1–11.3) */
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 6. Links — gold with a fast colour transition on hover (Req 12.4, 12.5) */
a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-gold-light);
}

/* 9. Lists used for navigation/structure shed their default markers */
ul {
  list-style: none;
  padding: 0;
}

/* Inherit typography on form controls for consistency */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* 7. Skip-to-content link — hidden off-screen until focused (Req 14.6) */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gold);
  color: var(--color-navy-dark);
  font-weight: var(--font-weight-semibold);
  border-radius: 0 0 var(--border-radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* 8. Visible keyboard focus indicator (Req 14.4, 14.5).
   Only shown for keyboard navigation via :focus-visible — never removed
   without a visible replacement. */
:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 2px;
}

/* 10. Honour reduced-motion preferences: disable smooth scroll, transitions,
   and animations for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Site header / primary navigation — base styles
   --------------------------------------------------------------------------
   The header is sticky so the navigation stays reachable while scrolling, and
   uses the shared navy/gold theme identically on every page (Req 12.2). Brand
   and link colour transitions stay ≤ 200 ms (Req 12.4, 12.5). The current
   page's link is visually distinguished via `.nav-link--active` (Req 2.9).

   NOTE: the hamburger-bar visuals and the mobile/desktop media queries are
   added separately (tasks 4.5 and 4.6). These rules are the layout-neutral,
   mobile-leaning base shared across all breakpoints.
   -------------------------------------------------------------------------- */

/* Sticky header surface — sits above page content with a subtle divider */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-navy-mid);
  border-bottom: 1px solid var(--color-navy-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Navbar — brand + toggle + menu on one centred, constrained row */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
}

/* Brand link — slightly larger, semibold, primary text → gold on hover */
.nav-brand {
  color: var(--color-text-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  transition: color var(--transition-base);
}

.nav-brand:hover {
  color: var(--color-gold);
}

/* Menu — flex container for the list items (breakpoint specifics in 4.5/4.6) */
.nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

/* Nav link — primary text with a fast colour transition on hover (Req 12.4, 12.5) */
.nav-link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-base);
}

.nav-link:hover {
  color: var(--color-gold);
}

/* Active link — gold highlight + underline indicator for the current page (Req 2.9) */
.nav-link--active {
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
  border-bottom: 2px solid var(--color-gold);
}

/* --------------------------------------------------------------------------
   Mobile hamburger navigation — default / mobile-first state (<= 767px)
   --------------------------------------------------------------------------
   These are the base (mobile) rules, so they apply at every width up to the
   768px breakpoint introduced in task 4.6. On a Mobile_Viewport the nav links
   are hidden behind a collapsible control in the default collapsed state
   (Req 11.1, 11.4); the `.nav-toggle` button is visible and the `.nav-menu`
   is collapsed. The nav script (task 5.1) toggles `.nav-menu--open` to reveal
   the links. Without JS the markup still keeps links reachable.
   -------------------------------------------------------------------------- */

/* Hamburger button — visible on mobile, 44px touch target (Req 14.x a11y) */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.nav-toggle:hover {
  background-color: var(--color-navy-light);
}

/* The three stacked bars that form the hamburger glyph */
.hamburger-bar {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: background-color var(--transition-base),
              transform var(--transition-base),
              opacity var(--transition-base);
}

/* Collapsed-by-default menu — full width so it drops below the brand/toggle
   row, hidden until `.nav-menu--open` is applied (Req 11.1, 11.4). The
   max-height + visibility transition gives a smooth reveal. */
.nav-menu {
  width: 100%;
  flex-basis: 100%;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transition-base),
              visibility var(--transition-base);
}

/* Open state — toggled on by the nav script to reveal all links (Req 11.4) */
.nav-menu--open {
  max-height: 500px;
  visibility: visible;
}

/* Comfortable tap spacing — each link is a full-width block with vertical
   padding so the open menu is easy to use on touch screens. */
.nav-menu .nav-link {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-3);
}

/* --------------------------------------------------------------------------
   Desktop / tablet navigation — horizontal always-visible row (>= 768px)
   --------------------------------------------------------------------------
   From the tablet breakpoint up (Tablet_Viewport and Desktop_Viewport), the
   collapsible hamburger pattern is no longer needed: the toggle button is
   hidden and the menu becomes a single horizontal row that is always visible,
   regardless of the `.nav-menu--open` class (Req 11.3). The mobile collapsing
   properties (max-height / overflow / visibility / full-width) are explicitly
   reset so the menu can never be hidden at these widths.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Hamburger button is unnecessary once the links sit in a row */
  .nav-toggle {
    display: none;
  }

  /* Menu becomes a horizontal flex row, always shown — every collapsing
     property from the mobile base rules is reset here. */
  .nav-menu {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    width: auto;
    flex-basis: auto;
    max-height: none;
    overflow: visible;
    visibility: visible;
  }

  /* Links sit inline in the row with tighter vertical padding rather than
     stacking as full-width blocks. */
  .nav-menu .nav-link {
    display: inline-block;
    width: auto;
    padding: var(--space-2) var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Site footer — shared across every page (Req 12.3)
   --------------------------------------------------------------------------
   The footer reuses the same design tokens as the rest of the theme so it
   renders identically on all four pages (Req 12.3). It sits on the mid-navy
   surface (slightly distinct from the navy-dark body) with a subtle top
   divider, generous vertical padding, and centred content. Footer link hover
   transitions stay ≤ 200 ms (Req 12.4, 12.5).
   -------------------------------------------------------------------------- */

/* Footer surface — mid-navy with a subtle divider, separated from content */
.site-footer {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-4);
  background-color: var(--color-navy-mid);
  border-top: 1px solid var(--color-navy-light);
  text-align: center;
}

/* Constrain inner content width and centre it, matching the shared container */
.site-footer .container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Footer link list — centred, wrapping flex row with no list markers */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footer link — secondary text → gold on hover, fast transition (Req 12.4, 12.5) */
.footer-link {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-base);
}

.footer-link:hover {
  color: var(--color-gold);
}

/* Copyright line — small, muted secondary text below the links */
.footer-copy {
  margin-top: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* --------------------------------------------------------------------------
   Hero section (Home) + reusable Button / CTA component
   --------------------------------------------------------------------------
   The hero is a near-full-viewport banner that flex-centres its content in a
   single column (Req 4.1). Its background layers three images, combined with
   commas: a very low-opacity gold diagonal `repeating-linear-gradient` stripe
   overlay (on top, for subtle texture), a soft `radial-gradient` glow blending
   into mid-navy, and a base `linear-gradient` from mid-navy to navy-dark.

   The reusable `.btn` is rendered as a real <a> or <button> so the
   "Book Appointment" CTA is keyboard-activatable and works without JS. As an
   inline-block it wraps rather than forcing horizontal overflow, so the CTA
   stays visible without horizontal scrolling at >= 320px (Req 7.1). All
   hover changes use the shared transitions (<= 200ms) and revert on mouse-out
   naturally via the transition (Req 12.4, 12.5).
   -------------------------------------------------------------------------- */

/* Hero banner — flex-centred column, near-full viewport height, layered bg */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 90vh;
  padding: var(--space-16) var(--space-4);
  background-color: var(--color-navy-dark);
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(200, 162, 74, 0.04) 0,
      rgba(200, 162, 74, 0.04) 1px,
      transparent 1px,
      transparent 14px
    ),
    radial-gradient(
      ellipse at 50% 0%,
      var(--color-navy-mid) 0%,
      transparent 65%
    ),
    linear-gradient(160deg, var(--color-navy-mid) 0%, var(--color-navy-dark) 70%);
}

/* Hero inner — constrains line length, centres, and spaces title/subtitle/CTA */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 48rem;
  margin: 0 auto;
}

/* Hero title — the page's single h1, large clamp size (Req 4.1, 14.3) */
.hero-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: 0.04em;
}

/* Hero subtitle — secondary text, larger than body, width-capped for reading.
   (No --font-size-lg token exists, so the larger --font-size-h3 is used.) */
.hero-subtitle {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

/* Reusable button — base. inline-block keeps it from forcing horizontal
   overflow at narrow widths (Req 7.1). Hover transitions stay <= 200ms and
   revert on mouse-out via the transition (Req 12.4, 12.5). */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast);
}

/* Primary CTA — gold fill, dark text. Gold (#c8a24a) on navy-dark (#0d1b2a)
   ~= 7.5:1, well above the 4.5:1 threshold (Req 14.8). Hover lightens the
   gold and lifts the button slightly; the explicit dark text colour overrides
   the global `a:hover` rule so contrast is preserved on hover. */
.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-navy-dark);
  border-color: var(--color-gold);
}

.btn--primary:hover {
  background-color: var(--color-gold-light);
  color: var(--color-navy-dark);
  border-color: var(--color-gold-light);
  transform: translateY(-2px);
}

/* Secondary — transparent with a gold outline + gold text; hover fills gold
   with dark text. The explicit colours override the global link colours. */
.btn--secondary {
  background-color: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.btn--secondary:hover {
  background-color: var(--color-gold);
  color: var(--color-navy-dark);
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Layout container + content sections
   --------------------------------------------------------------------------
   Shared centred container and vertical section rhythm used by every page
   below the hero. `.card-grid` is a responsive CSS Grid that is single-column
   on mobile (Req 11.1) and multi-column from the desktop breakpoint up
   (Req 11.3). Headings use the shared scale; body copy uses readable measure.
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.content-section {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-navy-light);
}

.content-section:last-of-type {
  border-bottom: none;
}

.section-title {
  margin-bottom: var(--space-6);
  color: var(--color-text-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: 0.02em;
}

.section-subtitle {
  margin: var(--space-8) 0 var(--space-3);
  color: var(--color-gold);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.prose p {
  margin-bottom: var(--space-4);
  max-width: 65ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-align: justify;
  text-justify: inter-word;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Responsive grid — single column by default (mobile-first, Req 11.1) */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   Education timeline cards ("ABOUT PRANAB")
   -------------------------------------------------------------------------- */
.education-card {
  padding: var(--space-6);
  background-color: var(--color-navy-mid);
  border: 1px solid var(--color-navy-light);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.card-label {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-gold-muted);
  color: var(--color-navy-dark);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
}

.card-degree {
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

.card-institution {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.card-batch {
  margin-top: var(--space-1);
  color: var(--color-gold);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.card-detail {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   Update cards (Updates page)
   --------------------------------------------------------------------------
   Stacked image + body on mobile; side-by-side from the tablet breakpoint up.
   `.img-failed` renders the descriptive alt text as a styled placeholder when
   an image fails to load (Req 8.8).
   -------------------------------------------------------------------------- */
.update-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  padding: var(--space-6);
  background-color: var(--color-navy-mid);
  border: 1px solid var(--color-navy-light);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.update-card:last-child {
  margin-bottom: 0;
}

/* Text-only update card (no image): stay single-column at all widths. */
.update-card--text {
  grid-template-columns: 1fr;
}

/* Logo-style update image: contain it (no crop) and skip the zoom motion. */
.update-card__img--logo {
  object-fit: contain;
  max-width: 320px;
  margin: 0 auto;
  animation: none;
}

.update-card:hover .update-card__img--logo {
  transform: none;
}

.update-card__image-wrap {
  overflow: hidden;
  border-radius: var(--border-radius-sm);
}

.update-card__img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-sm);
}

/* Placeholder shown when an update image fails to load (Req 8.8). The src is
   dropped by the inline onerror handler and this box surfaces the alt text. */
.update-card__img.img-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-4);
  background-color: var(--color-navy-light);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  text-align: center;
}

.update-card__title {
  margin-bottom: var(--space-4);
  color: var(--color-gold);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

/* --------------------------------------------------------------------------
   Contact list (Contact Us page)
   -------------------------------------------------------------------------- */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.contact-item {
  padding: var(--space-6);
  background-color: var(--color-navy-mid);
  border: 1px solid var(--color-navy-light);
  border-radius: var(--border-radius-md);
}

.contact-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-link {
  color: var(--color-gold);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-base);
}

.contact-link:hover {
  color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   Appointment action links
   -------------------------------------------------------------------------- */
.appointment-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-8);
}

.appointment-intro {
  max-width: 60ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

/* In-content fallback link to the appointment page (Req 7.3) */
.cta-fallback {
  margin-top: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* CTA navigation-failure message, hidden until revealed by the script (Req 7.4) */
.cta-error {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-navy-light);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-small);
}

.cta-error.is-visible {
  display: block;
}

/* --------------------------------------------------------------------------
   Responsive overrides
   --------------------------------------------------------------------------
   Tablet (>= 768px): update cards become image + body side-by-side.
   Desktop (>= 1024px): the education card grid becomes multi-column (Req 11.3).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .update-card {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    gap: var(--space-8);
  }

  /* Text-only update cards (no image) span the full width. */
  .update-card--text {
    grid-template-columns: 1fr;
  }

  .appointment-links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-item {
    flex: 1 1 280px;
  }
}

/* ==========================================================================
   ELEVATED DARK THEME — site-wide polish (applies to every page)
   ==========================================================================
   Layered on top of the base navy theme above. Introduces a richer near-black
   backdrop with ambient color glows, glassmorphic surfaces, vibrant gradient
   accents (indigo -> violet -> cyan), and interactive hover lift — for a more
   modern, premium dark look across all pages. Later rules intentionally
   override earlier base rules of equal specificity.
   ========================================================================== */

:root {
  --grad-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%);
  --grad-accent-soft: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #67e8f9 100%);
  --c-ink-0: #070a14;   /* deepest backdrop */
  --c-ink-1: #0d1222;   /* base surface */
  --c-ink-2: #151b30;   /* raised surface */
  --c-ink-3: #1f2742;   /* border / hairline */
  --c-violet: #a855f7;
  --c-indigo: #6366f1;
  --c-cyan: #22d3ee;
}

/* Ambient, fixed background glows behind all content */
body {
  background-color: var(--c-ink-0);
  background-image:
    radial-gradient(50rem 50rem at 12% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(45rem 45rem at 100% 0%, rgba(168, 85, 247, 0.16), transparent 55%),
    radial-gradient(40rem 40rem at 50% 120%, rgba(34, 211, 238, 0.12), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Glass sticky header */
.site-header {
  background: rgba(13, 18, 34, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-ink-3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.nav-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Active nav link gets a gradient text treatment + gradient underline */
.nav-link--active {
  color: #ffffff;
  border-bottom: 2px solid transparent;
  border-image: var(--grad-accent) 1;
}

/* Mobile dropdown panel: solid raised surface so it reads over content */
@media (max-width: 767px) {
  .nav-menu {
    background: var(--c-ink-2);
    border: 1px solid var(--c-ink-3);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    padding: var(--space-2);
  }
}

/* Section titles: gradient underline accent */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-3);
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--grad-accent);
}

.section-subtitle {
  background: var(--grad-accent-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-violet); /* fallback */
}

/* Cards (education, update, contact): glass surface, gradient top edge, lift */
.education-card,
.update-card,
.contact-item {
  position: relative;
  background: linear-gradient(180deg, rgba(31, 39, 66, 0.55), rgba(13, 18, 34, 0.55));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.education-card::before,
.update-card::before,
.contact-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-accent);
}

.education-card:hover,
.update-card:hover,
.contact-item:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 22px 60px rgba(99, 102, 241, 0.25);
}

/* Card label badge: vibrant gradient */
.card-label {
  background: var(--grad-accent);
  color: #ffffff;
}

/* Primary button: gradient fill with glow */
.btn--primary {
  background: var(--grad-accent);
  background-size: 160% 160%;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
  transition: background-position var(--transition-base),
    transform var(--transition-fast), box-shadow var(--transition-base);
}

.btn--primary:hover {
  background-position: 100% 0;
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(168, 85, 247, 0.45);
}

/* Secondary button: gradient outline feel */
.btn--secondary {
  background: rgba(168, 85, 247, 0.08);
  color: #e7e3ff;
  border-color: rgba(168, 85, 247, 0.55);
}

.btn--secondary:hover {
  background: rgba(168, 85, 247, 0.18);
  color: #ffffff;
  border-color: var(--c-violet);
  transform: translateY(-2px);
}

/* Contact link accent */
.contact-link {
  background: var(--grad-accent-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer: deep glass strip */
.site-footer {
  background: rgba(7, 10, 20, 0.85);
  border-top: 1px solid var(--c-ink-3);
}

/* ==========================================================================
   LIVE ANIMATIONS — site-wide motion layer
   ==========================================================================
   Scroll-reveal, animated gradient accents, shimmer, and interactive micro-
   motion. All wrapped so that users who prefer reduced motion get a static,
   fully-visible experience.
   ========================================================================== */

/* --- Scroll reveal: elements start hidden + shifted, then animate in when
   the JS adds `.is-visible` (IntersectionObserver in nav.js) ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers so grouped items cascade in */
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
.reveal--d4 { transition-delay: 0.32s; }

/* --- Animated gradient on the section-title underline accent -------------- */
.section-title::after {
  background-size: 200% 200%;
  animation: hm-slide-grad 6s ease infinite;
}

@keyframes hm-slide-grad {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Card top-edge gradient gently animates ------------------------------- */
.education-card::before,
.update-card::before,
.contact-item::before {
  background-size: 200% 200%;
  animation: hm-slide-grad 5s ease infinite;
}

/* --- Primary button: subtle continuous sheen ------------------------------ */
.btn--primary {
  position: relative;
  overflow: hidden;
}

.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: hm-sheen 3.6s ease-in-out infinite;
}

@keyframes hm-sheen {
  0% { left: -150%; }
  55% { left: 150%; }
  100% { left: 150%; }
}

/* --- Nav links: animated gradient underline grows on hover ---------------- */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  background: var(--grad-accent);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Active link keeps its existing border indicator; suppress the hover bar */
.nav-link--active::after {
  display: none;
}

/* --- Update card images: slow zoom on hover ------------------------------- */
.update-card__image-wrap {
  overflow: hidden;
}

.update-card__img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.update-card:hover .update-card__img {
  transform: scale(1.05);
}

/* --- Floating animation utility (used by hero accents etc.) --------------- */
@keyframes hm-bob {
  from { transform: translateY(-8px); }
  to { transform: translateY(8px); }
}

/* --- Honour reduced motion: freeze everything, show content as-is --------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .section-title::after,
  .education-card::before,
  .update-card::before,
  .contact-item::before,
  .btn--primary::after {
    animation: none !important;
  }

  .update-card:hover .update-card__img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Embedded form (Appointment page Google Form iframe)
   --------------------------------------------------------------------------
   A glass-surfaced container holding the embedded Google Form so visitors can
   book without leaving the site. The iframe is given a tall, responsive height
   and the wrapper matches the card styling used elsewhere.
   -------------------------------------------------------------------------- */
.form-embed {
  margin: var(--space-8) 0 var(--space-12);
  padding: var(--space-4);
  background: linear-gradient(180deg, rgba(31, 39, 66, 0.55), rgba(13, 18, 34, 0.55));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.form-embed__frame {
  display: block;
  width: 100%;
  height: 1400px;          /* tall enough for most form lengths */
  max-height: 80vh;        /* keep it scrollable within the viewport */
  border: 0;
  border-radius: var(--border-radius-md);
  background: #ffffff;     /* form renders on white; avoids a dark flash */
}

.form-embed__fallback {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  text-align: center;
}

.form-embed__fallback a {
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   Native appointment form (Appointment page)
   --------------------------------------------------------------------------
   A fully on-site form styled to match the dark theme. Replaces the embedded
   Google Form while still posting to Google's response endpoint.
   -------------------------------------------------------------------------- */
.appointment-note {
  max-width: 60ch;
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: rgba(168, 85, 247, 0.10);
  border-left: 3px solid var(--c-violet);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.appointment-note strong {
  color: var(--color-text-primary);
}

.appt-form {
  max-width: 40rem;
  margin: var(--space-8) 0 var(--space-12);
  padding: var(--space-8);
  background: linear-gradient(180deg, rgba(31, 39, 66, 0.55), rgba(13, 18, 34, 0.55));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.field {
  margin-bottom: var(--space-6);
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.field__label span {
  color: var(--c-violet);
}

.field__input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: rgba(7, 10, 20, 0.55);
  color: var(--color-text-primary);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-body);
  transition: border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.field__input::placeholder {
  color: rgba(194, 200, 212, 0.5);
}

.field__input:hover {
  border-color: rgba(168, 85, 247, 0.45);
}

.field__input:focus {
  outline: none;
  border-color: var(--c-violet);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}

textarea.field__input {
  resize: vertical;
  min-height: 120px;
}

/* Native validation feedback after a submit attempt */
.appt-form input:invalid:not(:placeholder-shown),
.appt-form textarea:invalid:not(:placeholder-shown) {
  border-color: #f87171;
}

.appt-form__status {
  margin-top: var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.appt-form__status.is-success {
  color: #4ade80;
}

.appt-form__status.is-error {
  color: #f87171;
}

/* Success state: collapse the fields and show a prominent thank-you panel */
.appt-form.is-submitted .field,
.appt-form.is-submitted > .btn {
  display: none;
}

.appt-form.is-submitted .appt-form__status {
  margin-top: 0;
  padding: var(--space-6);
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-h3);
  text-align: center;
}

/* Honeypot spam trap — visually hidden, off the tab order. Bots that fill it
   get rejected by Web3Forms; humans never see it. */
.appt-form__botcheck {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Disabled submit button state while a request is in flight */
.appt-form .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   LEGAL STYLE THEME — site-wide palette override
   ==========================================================================
   A dignified, classic legal aesthetic: deep ink-navy surfaces, warm brass/
   gold accents, and a restrained oxblood-burgundy secondary — evoking leather-
   bound law volumes and the scales of justice. This block is appended last so
   it overrides the earlier accent gradients and ambient background glows.
   ========================================================================== */

:root {
  /* Refined legal accents: brass/gold dominant with an oxblood touch */
  --c-indigo: #1e3a5f;   /* deep legal navy */
  --c-violet: #8a6d3b;   /* antique brass (replaces violet usage) */
  --c-cyan: #c8a24a;     /* warm gold (replaces cyan usage) */
  --c-oxblood: #6b2230;  /* restrained burgundy */

  /* Brass -> gold -> pale-gold sweep with an oxblood lead-in */
  --grad-accent: linear-gradient(135deg, #6b2230 0%, #a9863a 45%, #d9b865 100%);
  --grad-accent-soft: linear-gradient(135deg, #8a6d3b 0%, #c8a24a 50%, #e7d6a0 100%);

  /* Deep, scholarly ink surfaces */
  --c-ink-0: #0a0f17;   /* deepest backdrop — near-black ink */
  --c-ink-1: #0f1622;   /* base surface */
  --c-ink-2: #16202f;   /* raised surface */
  --c-ink-3: #243245;   /* hairline / border */
}

/* Ambient, fixed background glows recoloured to warm gold + oxblood + navy,
   for a calm, authoritative backdrop rather than a vivid tech feel. */
body {
  background-color: var(--c-ink-0);
  background-image:
    radial-gradient(52rem 52rem at 10% -12%, rgba(200, 162, 74, 0.16), transparent 60%),
    radial-gradient(46rem 46rem at 100% 0%, rgba(107, 34, 48, 0.20), transparent 58%),
    radial-gradient(44rem 44rem at 50% 122%, rgba(30, 58, 95, 0.22), transparent 60%);
}

/* Headings shift to a classic serif for a scholarly, legal-document tone */
h1,
h2,
h3,
.hero-title,
.section-title,
.update-card__title,
.card-degree {
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  letter-spacing: 0.01em;
}

/* Card label badge reads as an embossed brass plate */
.card-label {
  letter-spacing: 0.08em;
}

/* Slightly slow the animated accents for a more measured, formal feel */
.section-title::after,
.education-card::before,
.update-card::before,
.contact-item::before {
  animation-duration: 9s;
}

/* ==========================================================================
   MORE LIVE ANIMATIONS — extra motion layer
   ==========================================================================
   Hero entrance sequence, scroll-progress bar, card sheen sweep, animated
   title underline draw-in, and a back-to-top button. All disabled cleanly
   under prefers-reduced-motion.
   ========================================================================== */

/* --- Scroll-progress bar (injected at top of <body> by nav.js) ------------ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 200;
  background: var(--grad-accent);
  background-size: 200% 100%;
  animation: hm-slide-grad 6s ease infinite;
  box-shadow: 0 0 12px rgba(200, 162, 74, 0.6);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* --- Hero entrance: title, subtitle, CTA rise + fade in on load ----------- */
.home-modern .hero-title,
.home-modern .hero-subtitle,
.home-modern .hero .btn--primary {
  opacity: 0;
  transform: translateY(24px);
  animation: hm-rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.home-modern .hero-title { animation-delay: 0.15s; }
.home-modern .hero-subtitle { animation-delay: 0.40s; }
.home-modern .hero .btn--primary { animation-delay: 0.65s; }

@keyframes hm-rise-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Gentle continuous float on the hero glass card */
.home-modern .hero-inner {
  animation: hm-card-bob 7s ease-in-out 1.4s infinite alternate;
}

@keyframes hm-card-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* --- Card sheen: a soft light sweep glides across cards on hover ---------- */
.education-card,
.update-card,
.contact-item {
  position: relative;
}

.education-card .card-degree,
.update-card__title,
.contact-item .contact-label {
  position: relative;
  z-index: 1;
}

.education-card::after,
.update-card::after,
.contact-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0s;
}

.education-card:hover::after,
.update-card:hover::after,
.contact-item:hover::after {
  left: 130%;
  transition: left 0.85s ease;
}

/* --- Section title underline draws in when the section is revealed -------- */
.reveal .section-title::after,
.section-title::after {
  transform-origin: left center;
}

.reveal:not(.is-visible) .section-title::after {
  transform: scaleX(0);
}

.reveal.is-visible .section-title::after {
  transform: scaleX(1);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

/* --- Back-to-top button (injected by nav.js) ------------------------------ */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-radius: 50%;
  background: rgba(15, 22, 34, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-gold);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: opacity var(--transition-base), visibility var(--transition-base),
    transform var(--transition-base), background-color var(--transition-base),
    color var(--transition-base);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.to-top:hover {
  background: var(--color-gold);
  color: #0a0f17;
  transform: translateY(-3px) scale(1.05);
}

.to-top:active {
  transform: translateY(0) scale(0.96);
}

/* --- Reduced motion: freeze/relax the new animations ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { animation: none; }

  .home-modern .hero-title,
  .home-modern .hero-subtitle,
  .home-modern .hero .btn--primary,
  .home-modern .hero-inner {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .education-card:hover::after,
  .update-card:hover::after,
  .contact-item:hover::after {
    transition: none;
    left: -75%;
  }

  .to-top {
    transition: opacity var(--transition-base), visibility var(--transition-base);
    transform: none;
  }

  .to-top.is-visible { transform: none; }
  .to-top:hover { transform: none; }
}

/* ==========================================================================
   PREMIUM INTERACTIONS — site-wide support styles
   ========================================================================== */

/* Magnetic buttons need a stable transform origin */
[data-magnetic] {
  will-change: transform;
}

/* Animated hamburger -> X morph (paired with .is-open toggled in nav.js) */
.nav-toggle .hamburger-bar {
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Staggered mobile menu link entrance when the menu opens */
@media (max-width: 767px) {
  .nav-menu--open .nav-link {
    animation: hm-menu-link-in 0.4s ease forwards;
    opacity: 0;
  }
  .nav-menu--open li:nth-child(1) .nav-link { animation-delay: 0.04s; }
  .nav-menu--open li:nth-child(2) .nav-link { animation-delay: 0.10s; }
  .nav-menu--open li:nth-child(3) .nav-link { animation-delay: 0.16s; }
  .nav-menu--open li:nth-child(4) .nav-link { animation-delay: 0.22s; }
  .nav-menu--open li:nth-child(5) .nav-link { animation-delay: 0.28s; }
}

@keyframes hm-menu-link-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

/* Update-card image: Ken Burns slow drift while on screen */
.update-card__img {
  animation: hm-kenburns 18s ease-in-out infinite alternate;
}

@keyframes hm-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* Button click ripple */
.btn {
  position: relative;
  overflow: hidden;
}

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  animation: hm-ripple 0.6s ease-out forwards;
}

@keyframes hm-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* Custom cursor (desktop, fine pointer only) */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9000;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
  }
  .cursor-dot {
    width: 7px;
    height: 7px;
    background: #d9b865;
  }
  .cursor-ring {
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(217, 184, 101, 0.7);
    transition: width 0.18s ease, height 0.18s ease, background-color 0.18s ease,
      border-color 0.18s ease;
  }
  .cursor-ring.is-hover {
    width: 52px;
    height: 52px;
    background: rgba(217, 184, 101, 0.12);
    border-color: rgba(217, 184, 101, 0.9);
  }
}

/* Page transition overlay (dissolve / fade) */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: linear-gradient(120deg, #0a0f17 0%, #16202f 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

.page-wipe.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .update-card__img { animation: none; }
  .nav-menu--open .nav-link { animation: none; opacity: 1; }
  .page-wipe, .cursor-dot, .cursor-ring { display: none !important; }
}

/* --------------------------------------------------------------------------
   Razorpay direct-checkout pay box (Appointment page)
   -------------------------------------------------------------------------- */
.pay-box {
  max-width: 40rem;
  margin: var(--space-8) 0 var(--space-12);
  padding: var(--space-8);
  background: linear-gradient(180deg, rgba(31, 39, 66, 0.55), rgba(13, 18, 34, 0.55));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.pay-box__title {
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

.pay-box__note {
  margin-bottom: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.pay-box__status {
  margin-top: var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.pay-box__status.is-success {
  color: #4ade80;
}

.pay-box__status.is-error {
  color: #f87171;
}

/* Success state: collapse inputs, highlight the confirmation */
.pay-box.is-paid .field,
.pay-box.is-paid [data-pay-btn] {
  display: none;
}

.pay-box.is-paid .pay-box__status {
  margin-top: 0;
  padding: var(--space-6);
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-h3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Monogram preloader — shared across all pages
   --------------------------------------------------------------------------
   (Also defined in home.css for the home page; duplicated here so the other
   pages get the same intro. Harmless if both load.)
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0f17;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.preloader__ring {
  stroke-dasharray: 244;
  stroke-dashoffset: 244;
  animation: hm-draw-ring 1.1s ease forwards,
    hm-pulse 1.1s ease-in-out 1.1s infinite;
}

@keyframes hm-draw-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes hm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__ring {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   Google Map embed (Contact page)
   -------------------------------------------------------------------------- */
.map-embed {
  max-width: 100%;
  margin: var(--space-12) 0 var(--space-4);
}

.map-embed__frame {
  display: block;
  width: 100%;
  height: 420px;
  margin-top: var(--space-4);
  border: 1px solid var(--c-ink-3);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  filter: saturate(0.9) contrast(1.05);
}

/* --------------------------------------------------------------------------
   Contact page: form + address two-column layout
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-8);
}

/* The form already has a max-width; let it fill its grid column instead */
.contact-grid .appt-form {
  max-width: none;
  margin: 0;
}

.address-card {
  padding: var(--space-8);
  background: linear-gradient(180deg, rgba(31, 39, 66, 0.55), rgba(13, 18, 34, 0.55));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.address-card__body {
  margin: var(--space-4) 0 var(--space-6);
  color: var(--color-text-secondary);
  font-style: normal;
  font-size: var(--font-size-lg, 1.0625rem);
  line-height: 1.8;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
  }
}

/* --------------------------------------------------------------------------
   Logo — nav brand mark + preloader image
   -------------------------------------------------------------------------- */
.nav-brand__logo {
  display: block;
  height: 52px;
  width: auto;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .nav-brand__logo { height: 60px; }
}

/* Preloader now shows the logo image with a gentle fade + scale pulse */
.preloader__logo {
  width: clamp(150px, 40vw, 220px);
  height: auto;
  border-radius: 16px;
  animation: hm-logo-in 0.9s ease forwards, hm-pulse 2.4s ease-in-out 0.9s infinite;
  filter: drop-shadow(0 0 30px rgba(200, 162, 74, 0.35));
}

@keyframes hm-logo-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__logo { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Appointment page: form + pay box side-by-side
   -------------------------------------------------------------------------- */
.appt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-8);
}

/* Let both panels fill their grid column rather than their own max-width */
.appt-grid .appt-form,
.appt-grid .pay-box {
  max-width: none;
  margin: 0;
}

@media (min-width: 900px) {
  .appt-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   "Coming soon / Stay tuned" placeholder (Services page)
   -------------------------------------------------------------------------- */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48vh;
  padding: var(--space-12) var(--space-4);
}

.coming-soon__title {
  margin-bottom: var(--space-4);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  background: var(--grad-accent-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-gold);
}

.coming-soon__text {
  max-width: 40ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   Service cards (Services page) + breadcrumb (E-Library page)
   -------------------------------------------------------------------------- */
.service-card {
  position: relative;
  display: block;
  padding: var(--space-8);
  background: linear-gradient(180deg, rgba(31, 39, 66, 0.55), rgba(13, 18, 34, 0.55));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

a.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200, 162, 74, 0.55);
  box-shadow: 0 22px 60px rgba(200, 162, 74, 0.22);
  color: inherit;
}

.service-card--soon {
  opacity: 0.75;
}

.service-card__label {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--grad-accent);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
}

.service-card__title {
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--font-size-h2);
}

.service-card__text {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.service-card__cta {
  display: inline-block;
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
}

.breadcrumb {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.breadcrumb a {
  color: var(--color-gold);
  font-weight: var(--font-weight-medium);
}

.breadcrumb span {
  color: var(--color-text-primary);
}

.coming-soon .btn {
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   E-Library access gate + embedded Drive folder
   -------------------------------------------------------------------------- */
.elib-gate {
  max-width: 36rem;
  margin: var(--space-8) 0;
  padding: var(--space-8);
  background: linear-gradient(180deg, rgba(31, 39, 66, 0.55), rgba(13, 18, 34, 0.55));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-ink-3);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.elib-gate__text {
  margin-bottom: var(--space-6);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.elib-gate__text strong {
  color: var(--color-gold);
}

/* Center the rendered Google button */
.elib-gate .g_id_signin {
  display: inline-block;
}

.elib-gate__status {
  margin-top: var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.elib-gate__status.is-error {
  color: #f87171;
}

.elib-welcome {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.elib-drive {
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  background: #ffffff;
  border: 1px solid var(--c-ink-3);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.elib-drive__frame {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 460px;
  border: 0;
  border-radius: var(--border-radius-md);
  background: #ffffff;
}

.elib-drive__fallback {
  margin-bottom: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.elib-drive__fallback a {
  font-weight: var(--font-weight-semibold);
}