/* ===================================================================
   AssignmentToppers Private Limited - Global Design System & Main Stylesheet
   Website: assignmenttoppers.com
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand Color Palette */
  --color-primary: #0B192C;        /* Midnight Academic Navy */
  --color-primary-light: #1E3E62;  /* Royal Academic Navy */
  --color-primary-dark: #060e18;   /* Deep Obsidian */
  
  --color-accent: #E5A93C;         /* Golden Amber - Logo AT */
  --color-accent-light: #F7C04A;   /* Soft Gold */
  --color-accent-dark: #C2831B;    /* Dark Gold */
  --color-accent-cyan: #00A8E8;    /* Logo Accent Cyan */
  
  --color-success: #10B981;       /* Emerald Green */
  --color-success-dark: #059669;
  --color-success-bg: #ECFDF5;
  
  --color-surface: #FFFFFF;
  --color-bg-alt: #F8FAFC;
  --color-bg-soft: #F1F5F9;
  --color-text-main: #0F172A;
  --color-text-muted: #475569;
  --color-text-subtle: #64748B;
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;

  /* Typography */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  
  /* Layout & Spacing */
  --max-width: 1400px;             /* Expanded for spacious breathing room */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 2px 4px rgba(11, 25, 44, 0.04);
  --shadow-md: 0 6px 16px rgba(11, 25, 44, 0.07);
  --shadow-lg: 0 12px 32px rgba(11, 25, 44, 0.1);
  --shadow-xl: 0 20px 48px rgba(11, 25, 44, 0.15);
  --shadow-gold: 0 8px 24px rgba(229, 169, 60, 0.25);
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-alt);
  color: var(--color-text-main);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Container with generous max-width */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Top Notification Bar */
.top-notice-bar {
  background: linear-gradient(90deg, #0B192C 0%, #1E3E62 50%, #0B192C 100%);
  color: #FFFFFF;
  padding: 0.55rem 1.5rem;
  font-size: 0.84rem;
  border-bottom: 1px solid rgba(229, 169, 60, 0.25);
}

.top-notice-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.top-notice-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.badge-offer {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: 800;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(229, 169, 60, 0.3);
}

.top-notice-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #CBD5E1;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.top-contact-link:hover {
  color: var(--color-accent);
}

/* ===================================================================
   REENGINEERED HEADER & NAVIGATION (FIXES OVERLAP & COLLISION)
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  z-index: 99999;
  transition: all var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.99);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
  gap: 1.5rem;
}

/* Brand Logo Container */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex-shrink: 0; /* Never shrink logo */
  margin-right: 1.25rem;
}

.brand-logo img {
  height: 50px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap; /* Prevent awkward wraps */
}

.brand-text-main {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-primary);
}

.brand-text-main span {
  color: var(--color-accent);
}

.brand-tagline {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-text-subtle);
}

/* Navigation Links List */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  flex-grow: 1;
  justify-content: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary-light);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  white-space: nowrap; /* Absolute protection against text wrapping */
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-accent-dark);
  background-color: rgba(229, 169, 60, 0.09);
}

.nav-link svg.chevron {
  width: 13px;
  height: 13px;
  transition: transform var(--transition-fast);
}

/* ===================================================================
   SERVICES MEGA MENU (3RD TAB) - COMPLETE ZERO-GAP STABILITY
   =================================================================== */
.has-megamenu {
  position: relative;
}

.megamenu-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 980px;
  max-width: 95vw;
  padding-top: 15px; /* Mouse transit buffer */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999999 !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.22s;
  transition-delay: 60ms;
}

.has-megamenu:hover .megamenu-wrapper,
.has-megamenu:focus-within .megamenu-wrapper,
.has-megamenu.open .megamenu-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.has-megamenu:hover .nav-link svg.chevron,
.has-megamenu.open .nav-link svg.chevron {
  transform: rotate(180deg);
}

.megamenu-content {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px -15px rgba(11, 25, 44, 0.22), 0 0 0 1px rgba(226, 232, 240, 0.9);
  padding: 1.75rem;
  overflow: hidden;
}

.megamenu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.megamenu-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.megamenu-title span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-dark);
  background: rgba(229, 169, 60, 0.12);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.megamenu-subtext {
  font-size: 0.82rem;
  color: var(--color-text-subtle);
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.megamenu-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  transition: all var(--transition-normal);
  text-decoration: none;
  color: var(--color-text-main);
  position: relative;
  overflow: hidden;
}

.megamenu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.megamenu-card:hover {
  background: #FFFFFF;
  border-color: var(--color-accent-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.megamenu-card:hover::before {
  opacity: 1;
}

.megamenu-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(11, 25, 44, 0.06);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  transition: all var(--transition-fast);
}

.megamenu-card:hover .megamenu-card-icon {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.megamenu-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.megamenu-card-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.megamenu-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F8FAFC;
  margin-left: -1.75rem;
  margin-right: -1.75rem;
  margin-bottom: -1.75rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-bottom: 1rem;
}

.megamenu-footer-text {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.megamenu-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  transition: gap var(--transition-fast);
}

.megamenu-footer-link:hover {
  gap: 0.7rem;
  color: var(--color-primary);
}

/* Nav Actions (CTA Button) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #0B192C 0%, #1E3E62 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1E3E62 0%, #0B192C 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #FFFFFF;
}

.btn-accent {
  background: linear-gradient(135deg, #E5A93C 0%, #D97706 100%);
  color: #0B192C;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(229, 169, 60, 0.35);
}

.btn-accent:hover {
  background: linear-gradient(135deg, #F7C04A 0%, #E5A93C 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229, 169, 60, 0.45);
}

.btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  font-weight: 700;
}

.btn-whatsapp:hover {
  background: #20BA5A;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-primary);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #FFFFFF;
}

.btn-outline-white {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
}

.btn-outline-white:hover {
  background: #FFFFFF;
  color: var(--color-primary);
  border-color: #FFFFFF;
}

/* Mobile Toggle Hamburger */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-primary);
}

.mobile-toggle svg {
  width: 28px;
  height: 28px;
}

/* ===================================================================
   HERO SECTION WITH 3D MOTION GRAPHICS CANVAS & VIDEO BACKGROUND
   =================================================================== */
.hero-section {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-color: var(--color-primary);
  color: #FFFFFF;
  overflow: hidden;
  padding: 4.5rem 0;
}

.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* Background Photo / Video Layer */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: saturate(1.1) contrast(1.15);
}

/* 3D Motion Graphics Canvas Layer */
#heroMotionCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Ambient Gradient Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 75% 35%, rgba(30, 62, 98, 0.72) 0%, rgba(11, 25, 44, 0.95) 75%),
              linear-gradient(135deg, rgba(11, 25, 44, 0.94) 0%, rgba(11, 25, 44, 0.88) 100%);
  z-index: 3;
}

.hero-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(229, 169, 60, 0.15);
  border: 1px solid rgba(229, 169, 60, 0.4);
  color: var(--color-accent-light);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  width: fit-content;
  backdrop-filter: blur(6px);
  animation: pulse-glow 3s infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 169, 60, 0.4); }
  50% { box-shadow: 0 0 16px 4px rgba(229, 169, 60, 0.2); }
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 2.9rem;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -1px;
  color: #FFFFFF;
}

.hero-title span.text-gradient {
  background: linear-gradient(135deg, #FFFFFF 30%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subheadline {
  font-size: 1.12rem;
  color: #E2E8F0;
  line-height: 1.65;
  max-width: 620px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}

.stat-label {
  font-size: 0.78rem;
  color: #94A3B8;
  margin-top: 0.35rem;
}

/* ===================================================================
   FLOATING RIGHT-SIDE ACTION WIDGETS
   =================================================================== */
.floating-actions-bar {
  position: fixed;
  right: 20px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99990;
}

.float-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  color: #FFFFFF;
  text-decoration: none;
}

.float-btn:hover {
  transform: translateX(-4px) scale(1.03);
  box-shadow: var(--shadow-xl);
}

.float-whatsapp {
  background: #25D366;
  animation: float-gentle 4s ease-in-out infinite;
}

.float-chat {
  background: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.float-callback {
  background: var(--color-accent-dark);
}

.float-backtotop {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-normal);
}

.float-backtotop.visible {
  opacity: 1;
  pointer-events: auto;
}

.float-backtotop:hover {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ===================================================================
   ON-SCROLL REVEAL ANIMATIONS
   =================================================================== */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid items */
.reveal-item:nth-child(1) { transition-delay: 50ms; }
.reveal-item:nth-child(2) { transition-delay: 100ms; }
.reveal-item:nth-child(3) { transition-delay: 150ms; }
.reveal-item:nth-child(4) { transition-delay: 200ms; }
.reveal-item:nth-child(5) { transition-delay: 250ms; }
.reveal-item:nth-child(6) { transition-delay: 300ms; }
.reveal-item:nth-child(7) { transition-delay: 350ms; }
.reveal-item:nth-child(8) { transition-delay: 400ms; }

/* Background pattern utilities */
.bg-academic-watermark {
  background-image: radial-gradient(rgba(11, 25, 44, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ===================================================================
   SECTION HEADERS & COMMON SECTION STYLES
   =================================================================== */
.section {
  padding: 5.5rem 0;
  position: relative;
}

.section-alt {
  background-color: #FFFFFF;
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.5rem auto;
}

.section-tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent-dark);
  background: rgba(229, 169, 60, 0.12);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.85rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.section-description {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ===================================================================
   TRUST & TURNITIN PLAGIARISM + AI REPORT SECTION
   =================================================================== */
.turnitin-trust-section {
  padding: 5.5rem 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  position: relative;
  overflow: hidden;
}

.turnitin-box {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 2px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.08), var(--shadow-lg);
  padding: 3rem;
  position: relative;
}

.turnitin-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-success-bg);
  color: var(--color-success-dark);
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.turnitin-heading {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 1rem;
  line-height: 1.25;
}

.turnitin-lead-text {
  font-size: 1.08rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 850px;
}

.turnitin-points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.turnitin-point-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.turnitin-point-card:hover {
  background: #FFFFFF;
  border-color: var(--color-success);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.point-icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  color: var(--color-success-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.point-text h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.point-text p {
  font-size: 0.82rem;
  color: var(--color-text-subtle);
  line-height: 1.45;
}

.turnitin-integrity-box {
  background: #F1F5F9;
  border-left: 4px solid var(--color-accent);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: 1.5rem;
}

.turnitin-integrity-box p {
  font-size: 0.88rem;
  color: var(--color-text-main);
  line-height: 1.6;
}

.turnitin-disclaimer {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  margin-top: 0.85rem;
  font-style: italic;
}

/* ===================================================================
   SERVICES OVERVIEW CARDS (8 MAIN SERVICES)
   =================================================================== */
.services-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.service-box-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-normal);
  text-decoration: none;
  color: inherit;
}

.service-box-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  box-shadow: 0 16px 36px -10px rgba(11, 25, 44, 0.12);
}

.service-box-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(11, 25, 44, 0.05) 0%, rgba(229, 169, 60, 0.12) 100%);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: all var(--transition-fast);
}

.service-box-card:hover .service-box-icon {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.service-box-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.service-box-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.service-box-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  transition: gap var(--transition-fast);
}

.service-box-card:hover .service-box-link {
  gap: 0.7rem;
  color: var(--color-primary);
}

/* ===================================================================
   WHY CHOOSE ASSIGNMENTTOPPERS (12 TRUST REASONS)
   =================================================================== */
.why-grid-12 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.why-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  transition: all var(--transition-fast);
}

.why-card:hover {
  border-color: var(--color-accent-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.why-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(229, 169, 60, 0.12);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.why-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}

.why-card-text {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  line-height: 1.45;
}

/* ===================================================================
   HOW IT WORKS (4 STEPS)
   =================================================================== */
.steps-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.step-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  position: relative;
  text-align: center;
}

.step-number {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.25rem 0.9rem;
  border-radius: var(--radius-full);
  border: 2px solid #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.step-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(11, 25, 44, 0.05);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.75rem auto 1.25rem auto;
}

.step-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.step-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ===================================================================
   STUDENT TESTIMONIALS (10 REAL STUDENT REVIEWS)
   =================================================================== */
.testimonials-grid-10 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.review-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.review-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-light);
  box-shadow: var(--shadow-md);
}

.review-stars {
  color: #F59E0B;
  display: flex;
  gap: 2px;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.review-quote {
  font-size: 0.92rem;
  color: var(--color-text-main);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1.25rem;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-meta h5 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
}

.author-meta span {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

/* ===================================================================
   COUNTRIES WE SERVE
   =================================================================== */
.countries-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.country-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 1.75rem;
  text-align: center;
  transition: all var(--transition-normal);
  /* the grid already makes the four cards equal height; this makes the
     button sit on the same baseline in each, however long the description */
  display: flex;
  flex-direction: column;
}
.country-card > .btn { margin-top: auto; }
.country-card .country-features-list { margin-bottom: 1.25rem; }

.country-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.country-flag-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.country-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.country-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.country-features-list {
  text-align: left;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.country-features-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.country-features-list li svg {
  color: var(--color-success);
  flex-shrink: 0;
}

/* ===================================================================
   PAYMENT METHODS SECTION
   =================================================================== */
.payments-section {
  padding: 3rem 0;
  background: #FFFFFF;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.payments-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.payments-title-group {
  display: flex;
  flex-direction: column;
}

.payments-title-group h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary);
}

.payments-title-group p {
  font-size: 0.82rem;
  color: var(--color-text-subtle);
}

.payment-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.payment-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primary);
  transition: all var(--transition-fast);
}

.payment-badge-pill:hover {
  background: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

/* ===================================================================
   FINAL CALL TO ACTION (CTA) SECTION
   =================================================================== */
.final-cta-section {
  background: linear-gradient(135deg, #0B192C 0%, #1E3E62 100%);
  color: #FFFFFF;
  padding: 5.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.final-cta-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #FFFFFF;
}

.final-cta-text {
  font-size: 1.1rem;
  color: #E2E8F0;
  line-height: 1.65;
  margin-bottom: 2.25rem;
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* ===================================================================
   FOOTER & OFFICIAL SOCIAL LINKS
   =================================================================== */
.site-footer {
  background: #060E18;
  color: #94A3B8;
  padding-top: 4.5rem;
  padding-bottom: 2rem;
  font-size: 0.88rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-top-grid {
  display: grid;
  /* six columns since the Website Services group was added; the brand column
     keeps enough width for the wordmark, the gap tightens to pay for it */
  grid-template-columns: 1.9fr 1fr 1fr 1fr 1fr 1.05fr;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.footer-logo img {
  height: 48px;
  width: auto;
  filter: brightness(1.1);
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
}

.footer-logo-text span {
  color: var(--color-accent);
}

.footer-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #94A3B8;
}

.footer-address-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-size: 0.82rem;
  color: #CBD5E1;
  line-height: 1.5;
}

.footer-address-box strong {
  color: #FFFFFF;
  display: block;
  margin-bottom: 0.25rem;
}

.footer-col h4 {
  font-family: var(--font-heading);
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--color-accent);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links-list a {
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  transition: color var(--transition-fast),
              transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover marker. Drawn with borders rather than a glyph so it renders identically
   without depending on font coverage, and coloured with currentColor so it picks
   up whichever gold the surrounding footer variant uses.

   It sits at left:-12px while the link itself slides +12px on hover, so the
   arrow lands exactly where the text used to start. Using transform rather than
   padding matters: several of these labels wrap onto two lines, and animating
   padding would narrow the text box, re-wrap the label and jump the column
   height mid-hover. A transform changes no layout at all.

   top is fixed rather than centred so the arrow tracks the first line on the
   labels that wrap. */
.footer-links-list a::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0.5em;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Pointer devices only: on touch, :hover latches after a tap and would leave the
   arrow stuck on the last link the user pressed. */
@media (hover: hover) and (pointer: fine) {
  .footer-links-list a:hover {
    color: var(--color-accent);
    transform: translateX(12px);
  }

  .footer-links-list a:hover::before,
  .footer-links-list a:focus-visible::before {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyboard users get the same affordance on every device. */
.footer-links-list a:focus-visible {
  color: var(--color-accent);
}

.footer-links-list a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

/* Reduced motion removes the travel, not the destination: the arrow and the
   shifted label still appear, they just stop sliding into place. */
@media (prefers-reduced-motion: reduce) {
  .footer-links-list a,
  .footer-links-list a::before {
    transition: color var(--transition-fast), opacity var(--transition-fast);
  }
  .footer-links-list a::before {
    transform: translateX(0);
  }
}

.social-media-container {
  margin-top: 1rem;
}

.social-media-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.social-icons-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.social-icon-btn:hover {
  transform: translateY(-3px);
  color: #FFFFFF;
}

.social-icon-btn.instagram:hover { background: #E1306C; border-color: #E1306C; }
.social-icon-btn.facebook:hover { background: #1877F2; border-color: #1877F2; }
.social-icon-btn.pinterest:hover { background: #E60023; border-color: #E60023; }
.social-icon-btn.x:hover { background: #000000; border-color: #555555; }
.social-icon-btn.tiktok:hover { background: #000000; border-color: #00f2fe; }
.social-icon-btn.threads:hover { background: #000000; border-color: #B14AE8; }
.social-icon-btn.youtube:hover { background: #FF0000; border-color: #FF0000; }
.social-icon-btn.linkedin:hover { background: #0A66C2; border-color: #0A66C2; }

.footer-bottom-bar {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: #64748B;
}

.footer-bottom-links {
  display: flex;
  gap: 1.25rem;
}

.footer-bottom-links a {
  color: #94A3B8;
}

.footer-bottom-links a:hover {
  color: var(--color-accent);
}

/* ===================================================================
   RESPONSIVE DESIGN & BREAKPOINTS
   =================================================================== */
@media (max-width: 1280px) {
  .nav-link {
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
  }
  .brand-logo {
    margin-right: 0.8rem;
  }
  .megamenu-wrapper {
    width: 900px;
  }
}

@media (max-width: 1100px) {
  .nav-link {
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
  }
  .megamenu-wrapper {
    width: 860px;
  }
  .megamenu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid-8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-grid-12 {
    grid-template-columns: repeat(3, 1fr);
  }
  .testimonials-grid-10 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  .mobile-toggle {
    display: block;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== FULL-WIDTH MOBILE NAV DRAWER ===== */
  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh;
    background: #FFFFFF;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: none;
    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000001;
  }

  .nav-menu.mobile-open {
    left: 0;
  }

  /* Nav drawer inner padding area */
  .nav-menu-inner {
    padding: 1.25rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Mobile nav close button row */
  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E2E8F0;
    background: #0B192C;
    color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .mobile-nav-header-brand {
    font-size: 0.9rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
  }

  .mobile-nav-close {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #FFFFFF;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
  }

  /* Backdrop overlay */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: fadeInBg 0.25s ease;
  }

  @keyframes fadeInBg {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .nav-backdrop.active {
    display: block;
  }

  /* Lock scroll when menu open */
  body.nav-open {
    overflow: hidden;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0;
    font-size: 1rem;
    border-bottom: 1px solid #F1F5F9;
    color: var(--color-primary);
    font-weight: 600;
  }

  .nav-link:hover {
    color: var(--color-accent-dark);
    background: transparent;
  }

  .megamenu-wrapper {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }

  .has-megamenu.mobile-expanded .megamenu-wrapper {
    display: block;
  }

  .megamenu-content {
    box-shadow: none;
    padding: 0.5rem 0;
    background: #F8FAFC;
    border-radius: var(--radius-sm);
    margin-top: 0.25rem;
    border-left: 3px solid var(--color-accent-light);
    padding-left: 0.5rem;
  }

  .megamenu-grid {
    grid-template-columns: 1fr !important;
    gap: 0.25rem;
    padding: 0.25rem 0;
  }

  .megamenu-card {
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
  }

  .megamenu-card-title {
    font-size: 0.88rem;
  }

  .megamenu-card-desc {
    display: none;
  }

  .megamenu-header, .megamenu-footer {
    display: none;
  }

  /* Header CTA cluster. These used to be styled as if .nav-actions lived
     inside the drawer (column, width:100%), which forced the header row wider
     than the viewport and pushed the hamburger out of reach. It lives in the
     header, so it stays a row that yields space to the menu button. */
  .nav-actions {
    flex-direction: row;
    width: auto;
    margin-top: 0;
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
  }

  .nav-actions .btn {
    width: auto;
    justify-content: center;
    min-height: 44px;
    min-width: 0;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Hero */
}

@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-title {
    font-size: 2.1rem;
  }

  .hero-cta-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-cta-group .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Order form */
  .form-grid-2 {
    grid-template-columns: 1fr !important;
  }

  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px !important;
    min-height: 48px;
  }

  textarea.form-control {
    min-height: 90px;
  }

  /* Sections */
  .section {
    padding: 2.75rem 0;
  }

  .section-title {
    font-size: 1.75rem;
  }

  /* Grids */
  .steps-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .countries-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid-12 {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid-8 {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid-10 {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Payments */
  .payments-wrapper {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .payment-badges-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Final CTA */
  .final-cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .final-cta-buttons .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }

  /* Floating bar */
  .float-btn span { display: none; }
  .float-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  /* Modal */
  .modal-box {
    width: calc(100vw - 2rem);
    max-width: 440px;
    padding: 1.5rem;
  }
}

/* Tablet specific */
@media (max-width: 768px) {
  .nav-container {
    height: 64px;
  }

  .top-notice-bar .container {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }

  .top-notice-left { justify-content: center; flex-wrap: wrap; }
  .top-notice-right { justify-content: center; }

  .hero-section { padding: 2.75rem 0 2rem; min-height: auto; }
  .hero-title { font-size: 1.85rem; }
  .hero-subheadline { font-size: 0.98rem; }

  .turnitin-grid { grid-template-columns: 1fr; }
  .turnitin-points-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

/* Small phone */
@media (max-width: 480px) {
  .container { padding-left: 1rem; padding-right: 1rem; }

  .top-notice-bar {
    padding: 0.35rem 0.75rem;
    font-size: 0.76rem;
  }

  .top-notice-bar .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .top-notice-left > span:not(.badge-offer) { display: none; }
  .badge-offer { font-size: 0.64rem; padding: 0.12rem 0.5rem; white-space: nowrap; }
  .top-notice-right .top-contact-link:first-child { display: none; }
  .top-notice-right { gap: 0; }

  .hero-section { padding: 2rem 0 1.75rem; }
  .hero-title { font-size: 1.55rem; letter-spacing: -0.3px; }
  .hero-badge { font-size: 0.74rem; padding: 0.28rem 0.65rem; }
  .hero-subheadline { font-size: 0.88rem; }
  .hero-stat-number { font-size: 1.45rem; }
  .hero-stat-label { font-size: 0.68rem; }

  .section { padding: 2.25rem 0; }
  .section-title { font-size: 1.48rem; }
  .section-header { margin-bottom: 1.5rem; }

  .services-grid-8, .why-grid-12, .steps-grid-4,
  .countries-grid-4, .turnitin-points-grid {
    grid-template-columns: 1fr;
  }

  .order-form-body { padding: 1rem; }
  .order-form-title { font-size: 1.3rem; }
  .order-discount-bar { padding: 0.6rem 1rem; font-size: 0.78rem; }

  .float-btn { width: 42px; height: 42px; }
  .floating-actions-bar { right: 8px; }
}

/* Tablet: 768px and below */
@media (max-width: 768px) {
  /* Top notice bar: compact on tablet */
  .top-notice-bar .container {
    flex-direction: column;
    gap: 0.3rem;
    text-align: center;
    padding: 0.45rem 1rem;
  }

  .top-notice-left {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .top-notice-right {
    justify-content: center;
    gap: 1rem;
  }

  .top-contact-link {
    font-size: 0.8rem;
  }

  /* Nav height reduction */
  .nav-container {
    height: 68px;
  }

  .nav-menu {
    top: 68px;
    height: calc(100vh - 68px);
  }

  .brand-text-main {
    font-size: 1.08rem;
  }

  .brand-tagline {
    font-size: 0.58rem;
  }

  /* Hero */
  .hero-section {
    padding: 3rem 0 2.5rem;
    min-height: auto;
  }

  .hero-title {
    font-size: 1.95rem;
  }

  .hero-subheadline {
    font-size: 1rem;
  }

  .hero-cta-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Order form - 1 column */
  .order-form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  /* Sections */
  .section {
    padding: 3rem 0;
  }

  .section-title {
    font-size: 1.75rem;
  }

  /* Grids */
  .services-grid-8 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .why-grid-12 {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid-10 {
    grid-template-columns: 1fr;
  }

  .countries-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Payments */
  .payment-badges-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .payments-wrapper {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Final CTA */
  .final-cta-buttons {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .final-cta-buttons .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Turnitin */
  .turnitin-grid {
    grid-template-columns: 1fr;
  }

  .turnitin-points-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile: 640px and below */
@media (max-width: 640px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero-title {
    font-size: 1.85rem;
  }

  .services-grid-8 {
    grid-template-columns: 1fr;
  }

  .turnitin-points-grid {
    grid-template-columns: 1fr;
  }

  .why-grid-12 {
    grid-template-columns: 1fr;
  }

  .steps-grid-4 {
    grid-template-columns: 1fr;
  }

  .testimonials-grid-10 {
    grid-template-columns: 1fr;
  }

  .countries-grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
  }

  .floating-actions-bar {
    right: 12px;
    bottom: 20px;
  }

  .float-btn span {
    display: none;
  }

  .float-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
}

/* Extra Small: 480px and below */
@media (max-width: 480px) {
  /* Top notice bar — ultra compact single row */
  .top-notice-bar {
    padding: 0.4rem 1rem;
    font-size: 0.78rem;
  }

  .top-notice-bar .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .top-notice-left {
    flex-direction: row;
    gap: 0.4rem;
  }

  /* Hide the long promo text; keep only badge on ultra-small */
  .top-notice-left > span:last-child {
    display: none;
  }

  .badge-offer {
    font-size: 0.66rem;
    padding: 0.14rem 0.55rem;
    white-space: nowrap;
  }

  .top-notice-right {
    gap: 0.6rem;
    flex-wrap: nowrap;
  }

  /* Hide email link on ultra-small, keep only WhatsApp */
  .top-notice-right .top-contact-link:first-child {
    display: none;
  }

  .top-contact-link {
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  /* Nav */
  .nav-container {
    height: 62px;
  }

  .nav-menu {
    top: 62px;
    height: calc(100vh - 62px);
  }

  .brand-logo img {
    height: 36px;
  }

  .brand-text-main {
    font-size: 0.96rem;
  }

  .brand-tagline {
    font-size: 0.55rem;
    letter-spacing: 0.8px;
  }

  /* Hero */
  .hero-section {
    padding: 2.25rem 0 2rem;
  }

  .hero-title {
    font-size: 1.62rem;
    letter-spacing: -0.5px;
  }

  .hero-badge {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
  }

  .hero-subheadline {
    font-size: 0.92rem;
  }

  .hero-cta-group {
    flex-direction: column;
    gap: 0.65rem;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .hero-stat-number {
    font-size: 1.55rem;
  }

  .hero-stat-label {
    font-size: 0.72rem;
  }

  /* Order form — force single column, prevent iOS zoom */
  .order-form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  .form-control {
    font-size: 16px; /* Prevents iOS auto-zoom on input focus */
    padding: 0.65rem 0.9rem;
  }

  select.form-control {
    font-size: 16px;
  }

  /* Sections */
  .section {
    padding: 2.5rem 0;
  }

  .section-header {
    margin-bottom: 1.75rem;
  }

  .section-title {
    font-size: 1.55rem;
  }

  .section-description {
    font-size: 0.9rem;
  }

  /* Cards */
  .step-card,
  .review-card,
  .country-card {
    padding: 1.25rem;
  }

  .service-box-title {
    font-size: 0.9rem;
  }

  /* Footer bottom */
  .footer-bottom-bar {
    font-size: 0.78rem;
  }

  /* Payments */
  .payment-badges-row {
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
  }

  .payment-badge-pill {
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
    gap: 0.4rem;
  }

  /* Floating bar */
  .floating-actions-bar {
    right: 8px;
    gap: 0.4rem;
  }

  .float-btn {
    width: 40px;
    height: 40px;
  }

  .float-backtotop {
    width: 36px;
    height: 36px;
  }
}

/* ===================================================================
   UI/UX PRO MAX - AURORA AMBIENT LIGHTING & MOTION TOKENS
   =================================================================== */

/* Aurora Ambient Lighting Container */
.aurora-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.28;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.ambient-orb-gold {
  background: radial-gradient(circle, #E5A93C 0%, rgba(229, 169, 60, 0) 70%);
  width: 450px;
  height: 450px;
  animation: aurora-flow 14s ease-in-out infinite alternate;
}

.ambient-orb-blue {
  background: radial-gradient(circle, #00A8E8 0%, rgba(0, 168, 232, 0) 70%);
  width: 500px;
  height: 500px;
  animation: aurora-flow 18s ease-in-out infinite alternate-reverse;
}

.ambient-orb-emerald {
  background: radial-gradient(circle, #10B981 0%, rgba(16, 185, 129, 0) 70%);
  width: 380px;
  height: 380px;
  animation: aurora-flow 12s ease-in-out infinite alternate;
}

@keyframes aurora-flow {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.25;
  }
  33% {
    transform: translate(60px, -40px) scale(1.15);
    opacity: 0.35;
  }
  66% {
    transform: translate(-50px, 50px) scale(0.9);
    opacity: 0.22;
  }
  100% {
    transform: translate(40px, -30px) scale(1.08);
    opacity: 0.32;
  }
}

/* Button Shimmer Sweep Effect */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: shimmer-sweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes shimmer-sweep {
  0% { left: -60%; }
  35% { left: 140%; }
  100% { left: 140%; }
}

/* Card Modern Luminous Borders & 3D Lift */
.service-box-card,
.why-card,
.step-card,
.review-card,
.country-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
  will-change: transform;
}

.service-box-card:hover,
.review-card:hover,
.country-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -15px rgba(11, 25, 44, 0.12),
              0 0 0 1.5px rgba(229, 169, 60, 0.45);
}

/* Accessible Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Reduced Motion Compliance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ambient-orb {
    animation: none !important;
  }
  .btn-shimmer::after {
    display: none !important;
  }
  #heroMotionCanvas,
  .ambient-particle-canvas {
    display: none !important;
  }
}


/* ===================================================================
   MOBILE DRAWER CHROME — hidden by default
   .mobile-nav-header and .nav-backdrop are injected by main.js on every
   page. They used to rely solely on a min-width media rule to stay hidden
   on desktop, so any moment the stylesheet was not yet applied (or was
   served stale from cache) flashed the drawer over the desktop header.
   Hiding them for every width above the drawer breakpoint means no cache
   or load-order state can leak the drawer over the desktop header, while
   the drawer range below is left completely untouched.
   =================================================================== */
@media (min-width: 1101px) {
  .mobile-nav-header,
  .nav-backdrop {
    display: none !important;
  }
}

/* ===================================================================
   SOCIAL BUTTONS ON A LIGHT SURFACE
   The contact page shows the same row on a white card, where the
   footer's translucent-white resting state is invisible. It used to
   carry an inline background per anchor, which outranked the
   .social-icon-btn.<brand>:hover rules and killed every hover colour
   and the lift. This modifier gives it a visible resting state while
   leaving the shared hover behaviour to win on its own specificity.
   =================================================================== */
.social-icon-btn--on-light {
  background: #0B192C;
  border-color: rgba(11, 25, 44, 0.18);
  color: #FFFFFF;
}

.social-icon-btn--on-light:hover {
  color: #FFFFFF;
}

/* ===========================================================================
   PAGE HERO VIDEO
   Background clip for the inner-page heroes (About, Services, Countries,
   Pricing, Turnitin & AI, Reviews, Blog, Contact).

   The section keeps its original gradient-plus-photo background, so a browser
   that never loads the video renders exactly what it did before. The video sits
   above that background and below the scrim; the scrim carries the navy wash
   that keeps the headline readable.

   The clip is a night library at roughly 40/255 mean luminance, so the scrim is
   deliberately lighter than the 0.94 gradient it replaces -- at that weight the
   footage would be invisible and there would be no point loading it.
   =========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;      /* keep these layers out of the header's stacking context */
}

.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;              /* the loader fades this in; 0 avoids a flash of raw footage */
  transition: opacity 600ms ease;
  pointer-events: none;
}

.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(11, 25, 44, 0.70) 0%,
      rgba(11, 25, 44, 0.78) 48%,
      rgba(11, 25, 44, 0.74) 100%);
}

/* A second, softer wash pulled toward the centre column. The lamp row in the
   footage is the brightest thing in frame and sits behind the sub-headline. */
.page-hero-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 62% at 50% 52%,
    rgba(11, 25, 44, 0.42) 0%, rgba(11, 25, 44, 0.10) 60%, rgba(11, 25, 44, 0) 100%);
}

/* Type over moving footage needs a little help that type over a flat colour
   does not: a shadow the eye does not read as a shadow, plus a hairline rule
   that gives the block a printed, academic edge. */
.page-hero .container h1 {
  text-shadow: 0 2px 18px rgba(6, 14, 26, 0.55), 0 1px 2px rgba(6, 14, 26, 0.4);
  letter-spacing: -0.015em;
}

.page-hero .container > p {
  text-shadow: 0 1px 12px rgba(6, 14, 26, 0.55);
}

.page-hero .badge-offer {
  box-shadow: 0 4px 18px rgba(6, 14, 26, 0.35);
}

.page-hero .container h1::after {
  content: '';
  display: block;
  width: 74px;
  height: 3px;
  margin: 1.15rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(229, 169, 60, 0.15));
}

/* Reduced motion and small screens never load the clip, so the original
   photographic background is what shows and needs no scrim adjustment. */
@media (prefers-reduced-motion: reduce) {
  .page-hero-video { display: none; }
}

/* ---------------------------------------------------------------------------
   Long email address.
   officialassignmenttoppers@assignmenttoppers.com is 47 characters with no
   natural break, so it overflows the footer address box and any other narrow
   container. overflow-wrap:anywhere lets the browser break it only when it
   genuinely does not fit, so it still renders on one line wherever there is
   room. Applied to every mailto link rather than one box at a time.
   --------------------------------------------------------------------------- */
a[href^="mailto:"],
.footer-address-box p,
.order-trust-pills span,
.contact-line-email {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Order-success modal: the email status button carries a long confirmation
   string. .btn sets white-space:nowrap for ordinary buttons; this one has to
   wrap, and needs real line-height once it does.
   --------------------------------------------------------------------------- */
#modalEmailBtn {
  white-space: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  padding: 0.85rem 1rem;
  height: auto;
}


/* ---------------------------------------------------------------------------
   Website Development division: megamenu card and footer group.
   --------------------------------------------------------------------------- */
.megamenu-card--web {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-color: rgba(0, 168, 232, 0.35);
  background: linear-gradient(135deg, #0B192C 0%, #1E3E62 100%);
  color: #FFFFFF;
}
.megamenu-card--web .megamenu-card-icon {
  background: rgba(0, 168, 232, 0.18);
  color: #7DD3F5;
  margin-bottom: 0;
}
.megamenu-card--web .megamenu-card-title { color: #FFFFFF; margin: 0; }
.megamenu-card--web .megamenu-card-desc  { color: #C7D2E0; flex-basis: 100%; margin: 0; }
.megamenu-card--web:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.megamenu-card-flag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.55rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
@media (min-width: 900px) {
  .megamenu-card--web .megamenu-card-desc { flex-basis: auto; flex: 1; }
}

/* footer headings stay on one line now that there are six columns */
.footer-col h4 { white-space: nowrap; }
@media (max-width: 1400px) and (min-width: 1101px) {
  .footer-top-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr 1fr; gap: 1.4rem; }
  .footer-col h4 { font-size: 0.98rem; }
}

/* On article pages the category pill sits in the flow above the H1; the
   absolute placement in components.css is for the listing thumbnails only. */
.blog-post-wrap > .blog-category-badge { position: static; }

/* ---------------------------------------------------------------- final CTA clip */
/* The gradient stays as the fallback (mobile, reduced motion, Save-Data never
   fetch the clip). Layers: video 0, scrim 1, aurora orbs 1, content 2. */
.final-cta-section { isolation: isolate; }
/* The clip is already very dark (mean ~10% luminance) with small bright
   particles, so it needs a light wash to keep the drifting lights from
   competing with the headline. The centre wash covers the text column. */
.final-cta-section .page-hero-scrim {
  background: linear-gradient(180deg,
    rgba(11, 25, 44, 0.46) 0%,
    rgba(11, 25, 44, 0.52) 50%,
    rgba(11, 25, 44, 0.58) 100%);
}
.final-cta-section .page-hero-scrim::after {
  background: radial-gradient(ellipse 54% 64% at 50% 48%,
    rgba(11, 25, 44, 0.56) 0%, rgba(11, 25, 44, 0.20) 60%, rgba(11, 25, 44, 0) 100%);
}
.final-cta-section .final-cta-title {
  text-shadow: 0 2px 18px rgba(6, 14, 26, 0.55), 0 1px 2px rgba(6, 14, 26, 0.4);
}
.final-cta-section .final-cta-text {
  text-shadow: 0 1px 12px rgba(6, 14, 26, 0.5);
}

/* ---------------------------------------------------------------- blog CTA strip clip */
/* Rounded card mid-listing; the same clip and gate as the homepage CTA. The
   copy is smaller and lighter (#CBD5E1 at .95rem) so the wash is a shade
   stronger than the homepage band's. */
.blog-cta-strip { position: relative; overflow: hidden; isolation: isolate; }
.blog-cta-strip > :not(.page-hero-video):not(.page-hero-scrim) { position: relative; z-index: 2; }
.blog-cta-strip .page-hero-scrim {
  background: linear-gradient(180deg,
    rgba(11, 25, 44, 0.60) 0%,
    rgba(11, 25, 44, 0.66) 50%,
    rgba(11, 25, 44, 0.72) 100%);
}
.blog-cta-strip .page-hero-scrim::after {
  background: radial-gradient(ellipse 72% 72% at 50% 50%,
    rgba(11, 25, 44, 0.56) 0%, rgba(11, 25, 44, 0.18) 60%, rgba(11, 25, 44, 0) 100%);
}
.blog-cta-strip h3 { text-shadow: 0 2px 14px rgba(6, 14, 26, 0.55); }
.blog-cta-strip p { text-shadow: 0 1px 10px rgba(6, 14, 26, 0.5); }
/* the disclosure line was #94A3B8, which only reached ~4.3:1 even on the flat
   gradient; a step lighter keeps it quiet and still readable over the clip */
.blog-cta-strip .blog-cta-note, .blog-cta-strip .blog-cta-note a { color: #B4C0D0; }

/* ---------------------------------------------------------------- ambient clip: shared scrim */
/* final-cta-ambient.mp4 is a very dark clip (mean ~10% luminance) with small
   bright particles; a light wash is enough, the inner-page default is tuned
   for the far brighter library footage. --left weights the wash toward
   left-aligned copy. */
.page-hero-scrim--ambient {
  background: linear-gradient(180deg,
    rgba(11, 25, 44, 0.50) 0%,
    rgba(11, 25, 44, 0.56) 50%,
    rgba(11, 25, 44, 0.62) 100%);
}
.page-hero-scrim--ambient::after {
  background: radial-gradient(ellipse 60% 66% at 50% 48%,
    rgba(11, 25, 44, 0.52) 0%, rgba(11, 25, 44, 0.16) 60%, rgba(11, 25, 44, 0) 100%);
}
.page-hero-scrim--ambient.page-hero-scrim--left::after {
  background: radial-gradient(ellipse 62% 90% at 26% 50%,
    rgba(11, 25, 44, 0.56) 0%, rgba(11, 25, 44, 0.18) 60%, rgba(11, 25, 44, 0) 100%);
}

/* service-page hero: photograph + gradient stay as the fallback; the orbs
   (::before/::after, z 1) keep glowing above the clip. */
.service-hero-detail { isolation: isolate; }
.service-hero-detail h1 { text-shadow: 0 2px 18px rgba(6, 14, 26, 0.55), 0 1px 2px rgba(6, 14, 26, 0.4); }
.service-hero-detail .service-hero-detail-grid p { text-shadow: 0 1px 12px rgba(6, 14, 26, 0.5); }

/* the breadcrumb sits at the very top of the service hero in small muted
   type, so the wash is heaviest there and the muted grey is a step lighter */
.service-hero-detail .page-hero-scrim--ambient {
  background: linear-gradient(180deg,
    rgba(11, 25, 44, 0.92) 0%,
    rgba(11, 25, 44, 0.90) 13%,
    rgba(11, 25, 44, 0.60) 34%,
    rgba(11, 25, 44, 0.56) 60%,
    rgba(11, 25, 44, 0.62) 100%);
}
.service-hero-detail .breadcrumb-nav { color: #A9B6C8; }

/* service-page "Get a fixed quote before you commit" box: small light copy,
   so the same heavier wash as the blog strip */
.service-quote-box { position: relative; overflow: hidden; isolation: isolate; }
.service-quote-box .page-hero-scrim--ambient {
  background: linear-gradient(180deg,
    rgba(11, 25, 44, 0.60) 0%,
    rgba(11, 25, 44, 0.66) 50%,
    rgba(11, 25, 44, 0.72) 100%);
}
.service-quote-box .page-hero-scrim--ambient::after {
  background: radial-gradient(ellipse 72% 72% at 50% 50%,
    rgba(11, 25, 44, 0.56) 0%, rgba(11, 25, 44, 0.18) 60%, rgba(11, 25, 44, 0) 100%);
}
.service-quote-box > :not(.page-hero-video):not(.page-hero-scrim) { position: relative; z-index: 2; }
.service-quote-box h3 { text-shadow: 0 2px 14px rgba(6, 14, 26, 0.55); }
.service-quote-box p { text-shadow: 0 1px 10px rgba(6, 14, 26, 0.5); }

/* country heroes (assignment-help-uk/usa/canada/australia) */
.country-hero { position: relative; overflow: hidden; isolation: isolate; }
.country-hero > .container { position: relative; z-index: 2; }
.country-hero h1 { text-shadow: 0 2px 18px rgba(6, 14, 26, 0.55), 0 1px 2px rgba(6, 14, 26, 0.4); }
.country-hero p { text-shadow: 0 1px 12px rgba(6, 14, 26, 0.5); }

/* policy page heroes (privacy, terms, academic integrity) */
.policy-hero { position: relative; overflow: hidden; isolation: isolate; }
.policy-hero > .container { position: relative; z-index: 2; }
.policy-hero h1 { text-shadow: 0 2px 18px rgba(6, 14, 26, 0.55), 0 1px 2px rgba(6, 14, 26, 0.4); }
.policy-hero p { text-shadow: 0 1px 12px rgba(6, 14, 26, 0.5); }