/*
Theme Name: Qickstep Core
Theme URI: https://qickstep.in
Author: hariyadaav12
Description: Barebones Techno-Legal Theme for qickstep.in. Includes automated pillars and encryption logic.
Version: 1.0
*/

/* ============================================================
   QICKSTEP BRAND TOKENS
   ============================================================ */
   /* --- GLOBAL FONT UNIFICATION --- */
/* --- GLOBAL FONT UNIFICATION WITH ICON EXCLUSION --- */
/* 1. APPLY FONT ONLY TO TEXT ELEMENTS, NOT ICONS */
/* 1. Target only specific text-heavy tags to avoid hitting icon containers */
body, 
.about-content p, 
.about-content h2, 
.authority-card h3, 
.authority-card p, 
.expertise-table td, 
.expertise-table th,
.pillar-card h3, 
.pillar-card p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. FORCED RESTORE FOR PILLAR ICONS */
/* This targets the specific HTML used in your Pillar Cards */
.pillar-icon, 
.pillar-icon *, 
[class^="dashicons-"], 
.dashicons, 
i.fa, 
i.fas, 
.emoji-icon {
    font-family: dashicons, FontAwesome, "Segoe UI Symbol" !important; /* Explicitly names the icon fonts */
    text-transform: none !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
}
:root {
	--qs-deep-navy: #1B365D;
	--qs-brand-orange: #F9A01B;
	--qs-text: #222;
	--qs-bg: #fcfcfc;
}

/* Layout container */
.qs-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* ============================================================
   Sticky Header + Pillar Menu
   ============================================================ */
.qs-site-header {
	position: sticky;
	top: 0;
	z-index: 999999; /* stay above hero and content */
	background: var(--qs-deep-navy);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.qs-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.qs-logo {
	display: block;
	height: 38px;
	width: auto;
	max-width: 260px;
}

.qs-primary-nav .qs-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.qs-primary-nav .qs-menu a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 6px;
	border-bottom: 2px solid transparent;
	transition: color 180ms ease, border-color 180ms ease;
}

.qs-primary-nav .qs-menu a:hover,
.qs-primary-nav .qs-menu a:focus {
	color: var(--qs-brand-orange);
	border-bottom-color: var(--qs-brand-orange);
}

/* ============================================================
   Hero (front page only)
   ============================================================ */
.qs-hero {
	width: 100%;
	background: linear-gradient(135deg, #0e2340 0%, var(--qs-deep-navy) 45%, #244a7d 100%);
	color: #ffffff;
	padding: 70px 0;
}

.qs-hero-inner {
	text-align: left;
}

.qs-hero-title {
	margin: 0 0 14px 0;
	font-size: clamp(1.9rem, 3vw, 3rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.5px;
}

.qs-hero-subtitle {
	margin: 0 0 22px 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	max-width: 60ch;
}

.qs-hero-cta {
	display: inline-block;
	background: var(--qs-brand-orange);
	color: #1a1a1a;
	font-weight: 800;
	text-decoration: none;
	padding: 12px 18px;
	border-radius: 8px;
	transition: transform 160ms ease, filter 160ms ease;
}

.qs-hero-cta:hover,
.qs-hero-cta:focus {
	filter: brightness(0.97);
	transform: translateY(-1px);
}

/* ============================================================
   Content area
   ============================================================ */
.qs-content {
	padding-top: 34px;
	padding-bottom: 50px;
}

.entry-title a {
	color: #2c3e50;
	text-decoration: none;
}

.entry-title a:hover {
	text-decoration: underline;
}

.qs-empty-state {
	text-align: center;
	color: #7f8c8d;
}

/* ============================================================
   QIKSTEP BITS & BYLAWS: PRO TYPOGRAPHY & BRANDING
   ============================================================ */

body {
	font-family: 'Georgia', serif; /* Authoritative & Professional */
	line-height: 1.85;
	color: var(--qs-text);
	background-color: var(--qs-bg);
}

/* Refine the Article Containers */
.entry-content {
    max-width: 850px;
    margin: 40px auto;
    text-align: justify; /* Standard for legal analysis */
}

/* Styled Paywall Lock Box */
.qickstep-lock-container {
    background: #1a252f;
    
    padding: 50px;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    color: #ffffff;
    text-align: center;
}

.qickstep-lock-container h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Helvetica', sans-serif;
    color: #ffffff;
    margin-bottom: 20px;
}

/* Legal Notice/Disclaimer Styling */
.qickstep-disclaimer {
    border-left: 8px solid #3498db;
    background: #f8f9fa;
    padding: 20px;
    font-style: italic;
    color: #444;
    margin: 30px 0;
}
/* ============================================================
   SPRINT 6: HEADER VISIBILITY & LOGO REFINEMENT
   ============================================================ */

/* 1. Invert Header to Light for Logo Clarity */
header, .site-header, .sticky-header {
    background-color: #ffffff !important; /* Pure white for maximum logo contrast */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 0;
}

/* 2. Fix Navigation Text for Light Background */
header nav ul li a {
    color: #1B365D !important; /* Brand Navy text */
    font-weight: 600;
}

header nav ul li a:hover {
    color: #F9A01B !important; /* Brand Orange hover */
}

/* 3. Logo Container Scaling */
.site-logo img {
    max-height: 60px;
    width: auto;
    display: block;
}

/* 4. Maintain Dark Hero for Authority */
.hero-section {
    background: linear-gradient(135deg, #1B365D 0%, #0d1b2e 100%);
    color: #ffffff;
    padding: 80px 0;
    margin-top: 0; /* Ensures it sits flush against the light header */
}
/* ============================================================
   SPRINT 6: BRANDED HEADER & HERO RECOVERY
   ============================================================ */

/* 1. Force a Clean White Sticky Header */
.sticky-header {
    background: #ffffff !important;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

/* 2. Flexbox: Logo Left, Menu Right */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* 3. Horizontal Navigation Fix */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Forces horizontal alignment */
    gap: 30px;
}

.nav-menu li a {
    text-decoration: none;
    color: #1B365D !important; /* Brand Navy from Logo */
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
}

.nav-menu li a:hover {
    color: #F9A01B !important; /* Brand Orange from Logo */
}

/* 4. Logo Scaling */
.site-logo img {
    max-height: 55px; /* Adjust based on your visual preference */
    width: auto;
    display: block;
}

/* 5. Hero Section Visual Authority */
.hero-section {
    background: linear-gradient(135deg, #1B365D 0%, #0d1b2e 100%);
    color: #ffffff;
    padding: 100px 20px;
    text-align: left;
}

.hero-button {
    display: inline-block;
    background: #F9A01B;
    color: #ffffff !important;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 25px;
}
.pillar-grid-container { padding: 50px 20px; background: #fcfcfc; }
.pillar-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pillar-card { 
    background: #fff; 
    padding: 30px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    border-top: 4px solid #F9A01B; /* Brand Orange accent */
    transition: transform 0.3s ease;
}
.pillar-card:hover { transform: translateY(-5px); }
.pillar-card h3 { color: #1B365D; margin-bottom: 15px; }
.pillar-card a { color: #F9A01B; font-weight: bold; text-decoration: none; }

/* --- SPRINT 6: PREMIUM PILLAR GRID REFINEMENT --- */

.pillar-grid-container {
    padding: 80px 0;
    background-color: #f4f7f9;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pillar-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(27, 54, 93, 0.08);
    border: 1px solid #e1e8ed;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pillar-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: #F9A01B; /* Brand Orange */
}

.pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(27, 54, 93, 0.15);
}

.pillar-icon { font-size: 40px; color: #1B365D; margin-bottom: 20px; }
.pillar-card h3 { color: #1B365D; font-size: 22px; margin-bottom: 15px; }
.pillar-link {
    display: inline-block;
    padding: 10px 25px;
    background: #1B365D;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
}
.pillar-link:hover { background: #F9A01B; }

/* Special styling for the BSA 2023 center card */
.highlight-card { border: 2px solid #F9A01B; }


/* --- ABOUT PAGE TABLE STYLING --- */
.expertise-table-wrapper {
    margin-top: 40px;
    overflow-x: auto;
}

.expertise-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Helvetica', sans-serif;
}

.expertise-table th {
    background-color: #1B365D; /* Brand Navy */
    color: #ffffff;
    text-align: left;
    padding: 15px;
    border: 1px solid #1B365D;
}

.expertise-table td {
    padding: 15px;
    border: 1px solid #e1e8ed;
    color: #444;
    vertical-align: top;
    line-height: 1.6;
}

/* Zebra Striping for Readability */
.expertise-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* --- ABOUT PAGE: WRAP TEXT AROUND IMAGE --- */
.about-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    overflow: hidden; /* Clears the float */
    margin-top: 80px !important; /* Increased from 30px to 80px */
    padding-top: 20px;
    border-top: 1px solid #eee; /* Optional: a very faint line to separate sections */
}

.about-image {
    float: left; /* Pulls image to the left */
    width: 280px; /* Reduced size as requested */
    margin-right: 30px; /* Space between image and text */
    margin-bottom: 20px; /* Space if text wraps below */
    border-left: 0px solid #F9A01B; /* QICKSTEP Orange Accent */
    padding-left: 15px;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(27, 54, 93, 0.15);
}

.about-content h2 {
    color: #1B365D;
    margin-top: 0; /* Aligns top of text with top of image */
}
.about-content h2 {
    border-bottom: none !important; 
    padding-bottom: 0 !important;
    margin-bottom: 20px !important;
}
.about-content p {
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5em;
}

/* Ensure the table stays below the floating image */
.expertise-table-wrapper {
    clear: both; 
    margin-top: 40px;
}
/* --- SPRINT 6: BRANDED FOOTER --- */
.site-footer {
    background: #1B365D; /* Brand Navy */
    color: #ffffff;
    padding: 60px 20px 30px;
    margin-top: 50px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.footer-logo {
    max-height: 40px;
    filter: brightness(0) invert(1); /* Makes the navy logo white for the dark background */
    margin-bottom: 15px;
}

.site-footer h4 {
    color: #F9A01B; /* Brand Orange */
    margin-bottom: 20px;
    font-size: 18px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

.site-footer ul li a {
    color: #ffffff;
    text-decoration: none;
    line-height: 2;
    transition: 0.3s;
}

.site-footer ul li a:hover {
    color: #F9A01B;
}

.footer-contact p {
    font-size: 14px;
    opacity: 0.8;
}

/* --- FINAL FOOTER REFINEMENT --- */
.site-footer {
    background: #1B365D !important; /* Brand Navy */
    color: #ffffff !important;
    padding: 60px 20px;
    margin-top: 50px;
    clear: both;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex; /* Forces horizontal layout */
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* Fix the giant logo from your screenshot */
.footer-logo {
    max-width: 250px; /* Constrains the width */
    height: auto;
    filter: brightness(0) invert(1); /* Turns navy logo white */
    margin-bottom: 20px;
    display: block;
}

.footer-info, .footer-pillars, .footer-contact {
    flex: 1;
}

.site-footer h4 {
    color: #F9A01B !important; /* Brand Orange */
    margin-bottom: 15px;
    font-size: 18px;
    text-transform: uppercase;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer ul li a {
    color: #ffffff !important;
    text-decoration: none;
    line-height: 2;
}

.site-footer ul li a:hover {
    color: #F9A01B !important;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* This ensures all columns start at the same top level */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}
.footer-logo {
    margin-left: 10px; /* Adds a small gap from the left edge */
}

/* Fix for Table Alignment - Forces it below the floating image */
.expertise-table-wrapper {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin-top: 40px !important;
}
.site-footer img {
    max-width: 140px;
    filter: grayscale(100%) brightness(200%); /* Makes the logo white/silver */
    opacity: 0.7; /* Makes it blend into the background */
    transition: opacity 0.3s ease;
}

.site-footer img:hover {
    opacity: 1; /* Lights up slightly when hovered */
}
.footer-nav a, .footer-col ul li a {
    color: #bdc3c7; /* Muted grey */
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Professional legal look */
}

.footer-nav a:hover {
    color: #d35400; /* Only turns orange on hover */
}
.footer-col {
    flex: 1;
    padding: 0 15px;
}

.footer-col h3 {
    font-family: 'Montserrat', sans-serif; /* Or your primary heading font */
    font-size: 22px;
}

.footer-col a:hover {
    color: #d35400 !important; /* The signature orange on hover */
    transition: 0.3s;
}
/* Styling for the Privacy Policy and standard pages */
.content-wrapper {
    max-width: 800px;       /* Professional reading width (not too wide) */
    margin: 40px auto;     /* Centers the block and gives top/bottom space */
    padding: 0 40px;       /* Gives the "Space at left" and right you requested */
    line-height: 1.8;      /* Increases readability for legal text */
    font-family: Arial, Helvetica, sans-serif;
    color: #333;           /* Dark grey for better readability on white */
    text-align: justify;   /* Optional: Gives that formal 'Legal Document' look */
}

.content-wrapper h2, .content-wrapper h3 {
    color: #1a252f;        /* Matches your footer navy for consistency */
    margin-top: 30px;
    border-bottom: 1px solid #eee; /* Subtle separator */
    padding-bottom: 10px;
}
/* --- QIKSTEP PREMIUM SCROLLER (WHITE TILES) --- */

.qickstep-scrolling-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 40px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hides scrollbar for Firefox by default */
}

/* Auto-Hide Logic: Only show scrollbar on hover */
.qickstep-scrolling-wrapper:hover {
    scrollbar-width: thin;
    scrollbar-color: #d35400 #f0f0f0;
}

.qickstep-scrolling-grid {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
}

.white-tile-box {
    flex: 0 0 310px; /* Fixed width for consistency */
    background: #ffffff !important;
    padding: 45px 25px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-top: 6px solid #d35400; /* Signature Orange */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: normal;
}

.white-tile-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.tile-icon { font-size: 45px; margin-bottom: 20px; }

.white-tile-box h3 {
    color: #1a252f !important; /* Navy */
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.white-tile-box p { color: #5d6d7e; font-size: 14px; margin-bottom: 20px; }

.tile-cta {
    color: #d35400;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Custom Scrollbar Styling (Webkit) */
.qickstep-scrolling-wrapper::-webkit-scrollbar {
    height: 6px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s;
}

.qickstep-scrolling-wrapper:hover::-webkit-scrollbar {
    opacity: 1; /* Shows on hover */
}

.qickstep-scrolling-wrapper::-webkit-scrollbar-thumb {
    background: #d35400;
    border-radius: 10px;
}

.qickstep-scrolling-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
/* Forces the 4th tile into the same row */
.pillar-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 equal columns */
    gap: 20px;
    width: 100%;
}

/* Ensure all cards look identical */
.pillar-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    border-top: 6px solid #fb8c00; /* Signature Qikstep Orange */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
/* --- HERO SECTION: BLURRED IMAGE BACKGROUND --- */
.custom-hero-bg {
    position: relative;
    background-image: url('assets/images/unnamed-1.jpg'); /* Upload your image to WordPress Media first */
    
    background-attachment: scroll !important;
    align-items: center;
    overflow: hidden;
    /* 3. Force the image to cover the smaller area */
    background-size: cover !important;
    background-position: center center !important;
    display: flex !important; /* Ensures the container doesn't collapse to 0px height */
    min-height: 200px !important;
}
/* --- FINAL PRECISION HERO SECTION --- */
.hero-section {
    position: relative;
    min-height: 320px !important; /* Compact & Professional */
    display: flex;
    align-items: center;
    padding: 30px 0 !important; /* Minimalist vertical padding */
    background-size: cover;
    background-position: center right;
    margin-bottom: 20px; /* Brings the tiles up closer */
}

/* The "Blur" and "Tint" layer */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 37, 47, 0.7); /* Deep Navy tint to match your brand */
    backdrop-filter: blur(1px); /* This creates the blur effect on the image */
    z-index: 1;
}


/* Ensure content sits on top of the blur */
.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.usp-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* Adds extra readability */
}

.usp-subtitle {
    color: #f4f4f4;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 25px; /* Space before the button */
}
.brand-authority-wrapper {
    max-width: 1200px;
    margin: 60px auto;
    padding: 50px 30px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}

.authority-grid {
    display: flex;
    justify-content: space-between;
}

.authority-card {
    flex: 1;
    text-align: center;
    padding: 0 20px;
}

.border-left-right {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.auth-icon-container {
    width: 75px;
    height: 75px;
    background: #fdf2e9;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-icon { font-size: 32px; }

.auth-logo { max-width: 50px; height: auto; }

.authority-card h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a252f;
    text-transform: uppercase;
    margin-bottom: 12px !important;
}

.highlight { color: #fb8c00; font-weight: 700; }

.pulse-ring { animation: ring-pulse 2s infinite; }
/* Unify Table and Trust Bar Body Text */
.expertise-table td, 
.authority-card p, 
.about-content p {
    font-size: 18px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.3px !important;
    color: #444 !important; /* Unified dark gray for readability */
}

/* Unify Headings */
.expertise-table th, 
.authority-card h3, 
.about-content h2 {
    font-weight: 800 !important; /* Consistent "Strong" weight */
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- PILLAR LOGO ALIGNMENT --- */
.pillar-card .pillar-icon img {
    max-width: 60px !important; /* Adjust based on your logo size */
    height: auto !important;
    display: block;
    margin: 0 auto;
}

.pillar-icon span {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
/* --- UPDATED TRUST BAR WITH LEFT ORANGE EDGE --- */
.brand-authority-wrapper {
    max-width: 1200px;
    margin: 60px auto;
    padding: 50px 40px;
    background: #ffffff;
    border-radius: 8px; /* Matches the radius of your footer note */
    
    /* THE FIX: Adding the orange left border */
    border-left: 6px solid #fb8c00; 
    
    /* Matching the soft shadow from your screenshots */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
}
/* Ensures headers line up even if text length varies */
.authority-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Makes all columns equal height */
}

.authority-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Keeps icons at the top */
}
/* ============================================================
   ABOUT US PAGE: BRANDED ALIGNMENT
   ============================================================ */

/* 1. The Main Wrapper: Locks the page to your 1200px Brand Grid */
.about-page-wrapper {
    max-width: 1200px !important;
    margin: 60px auto !important;
    padding: 0 20px !important;
}

/* 2. The Intro Section: Profile Image + Biography */
.about-intro-flex {
    display: flex !important;
    align-items: center !important; /* Vertically centers text with your photo */
    gap: 50px !important;
    background: #ffffff !important;
    border-left: 8px solid #fb8c00 !important; /* Your Signature Orange Spine */
    padding: 50px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    margin-bottom: 50px !important;
}

/* 3. Image Sizing (Prevents Distortion) */
.about-image-container {
    flex: 0 0 280px !important; /* Keeps your profile photo a consistent size */
}

.about-image-container img {
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
}

/* 4. Text Content: Code & Counsel */
.about-bio-content h2 {
    color: #1B365D !important; /* Brand Navy */
    margin-top: 0 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
}

.about-bio-content p {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #444 !important;
}

/* 5. Expertise Table: Edge Alignment */
.expertise-table-wrapper {
    background: #ffffff !important;
    border-left: 8px solid #fb8c00 !important; /* Matches the Intro Spine */
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    padding: 0 !important; /* Table fills the box to the edges */
    overflow: hidden;
}

/* --- UNIFIED ABOUT INTRO BOX (MATCHES EXPERTISE TABLE) --- */

/* 1. Create the Main Rounded Box with Orange Spine */
.about-intro-container {
    max-width: 1200px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    border-left: 0px solid #fb8c00 !important; /* Signature Orange Spine */
    border-radius: 12px !important; /* Matches Expertise Table rounding */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    padding: 50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 50px !important;
    box-sizing: border-box !important;
}

/* 2. Fix the Photo Size and Alignment */
.about-photo-wrapper {
    flex: 0 0 280px !important; /* Keeps your photo size consistent */
}

.about-photo-wrapper img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important; /* Subtle rounding for the image itself */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* 3. Style the Intro Text Content */
.about-text-content {
    flex: 1 !important;
}

.about-text-content h2 {
    color: #1B365D !important; /* Brand Navy */
    font-size: 32px !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
}

.about-text-content p {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #444 !important;
    margin-bottom: 1.5em !important;
}
/* --- THE ABOUT PAGE BREAKOUT FIX --- */
.qs-full-width-breakout {
    width: 1200px !important;
    max-width: 95vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
}

/* Ensure the theme's 'cage' doesn't hide the stretched box */
.page-id-ABOUT-ID-HERE .entry-content,
.page-template-default .entry-content {
    overflow: visible !important;
}
/* --- BRANDED SINGLE POST TITLE BOX --- */

/* 1. Target the Post Title Container */
.single-post .entry-header {
    max-width: 1200px !important;
    margin: 40px auto !important; /* Centered 1200px Grid */
    padding: 50px !important;
    background: #ffffff !important;
    border-left: 8px solid #fb8c00 !important; /* Signature Orange Spine */
    border-radius: 12px !important; /* Matches About Us Card rounding */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
}

/* 2. Style the Title Text inside the box */
.single-post .entry-title {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #1B365D !important; /* Brand Navy */
    text-transform: uppercase;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* 3. Style Post Metadata (Date, Author) if it exists */
.single-post .entry-meta {
    margin-top: 15px !important;
    font-size: 14px !important;
    color: #fb8c00 !important; /* Orange accents for metadata */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- GLOBAL POST HEADER UNIFICATION --- */

/* --- FORCED ROUNDED CORNERS FOR ALL POST HEADERS --- */

/* 1. Target every possible title container across all modes */
header.entry-header, 
.single-post .entry-header, 
.archive-header, 
.page-header,
.category .page-header {
    background: #ffffff !important;
    border-left: 8px solid #fb8c00 !important; /* Signature Orange Spine */
    
    /* THE FIX: Forced Rounding */
    border-radius: 12px !important; 
    -webkit-border-radius: 12px !important; /* Safari/Chrome support */
    -moz-border-radius: 12px !important;    /* Firefox support */
    
    padding: 50px !important;
    margin: 40px auto !important;
    max-width: 1200px !important;
    width: 100% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    
    /* Ensure no theme borders interfere */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* 2. Remove any theme-specific backgrounds that might hide the corners */
.entry-header:before, 
.entry-header:after {
    display: none !important;
}


.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

/* Style the "Post Comment" Button to match QickStep Orange */
#submit {
    background-color: #fb8c00 !important;
    color: white !important;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}
/* --- QICKSTEP BRANDED COMMENTS --- */
/* --- FORCE COMMENTS VISIBILITY & BRANDING --- */
#comments, 
.comments-area, 
#respond {
    display: block !important; /* Forces it to show */
    visibility: visible !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 50px !important;
    background: #ffffff !important;
    border-left: 8px solid #fb8c00 !important; /* Signature Orange Spine */
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    clear: both !important;
}

/* Fix for themes that hide the comment form for guests */
.comment-respond {
    display: block !important;
}
/* Title Hover Effect */
.entry-title a:hover {
    color: #fb8c00 !important;
    text-decoration: underline !important;
}

/* Button Hover Effect */
.qs-read-more-button:hover {
    background-color: #e67e00 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}

/* Ensure Excerpts aren't too long */
.entry-summary {
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Limit to 7 lines for a clean grid */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    margin-bottom: 20px;
}
.expertise-table-container, 
.expertise-table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: fixed; /* Prevents cells from pushing the width out */
    margin-right: 0 !important;
}
/* Unify Expertise and Authority Tables */
.expertise-table, 
.authority-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; /* Clean modern Sans-Serif */
    font-size: 18px !important;
    color: #333 !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

/* Header Styling */
.expertise-table th, 
.authority-table th {
    background-color: #fcfcfc !important;
    color: #fb8c00 !important; /* Your signature orange */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px !important;
    border-bottom: 3px solid #fb8c00 !important;
    text-align: left !important;
}

/* Cell Styling */
.expertise-table td, 
.authority-table td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    line-height: 1.6 !important;
    vertical-align: top !important;
}

/* Row Hover Effect for Interactivity */
.expertise-table tr:hover, 
.authority-table tr:hover {
    background-color: #fff9f2 !important; /* Very light orange tint */
}

/* Force exactly 6 lines in Archive/Category view */
.archive .entry-content p, 
.archive .entry-summary p {
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important; /* The magic number */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.6 !important; /* Ensures consistent line math */
    max-height: calc(1.6em * 6) !important; /* Fallback for older browsers */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .about-intro-flex {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 20px !important;
    }
    
    .about-image-container {
        flex: 0 0 auto !important;
        max-width: 200px !important;
        margin-bottom: 20px !important;
    }
}

/* --- SPRINT 6: MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .header-container, 
    .footer-container, 
    .pillar-grid,
    .expertise-flex {
        flex-direction: column !important;
        text-align: center;
    }

    .about-image {
        float: none !important;
        margin: 0 auto 20px !important;
        width: 100% !important;
        max-width: 300px;
    }

    .pillar-grid {
        grid-template-columns: 1fr !important;
    }
    
    .footer-logo {
        margin: 0 auto 20px;
    }
}
/* Tablet: 2x2 grid */
@media (max-width: 992px) {
    .pillar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* Mobile: Single column */
@media (max-width: 600px) {
    .pillar-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 768px) {
    /* Shrink the logo to prevent overlap */
    .site-logo img {
        max-width: 120px !important;
    }

    /* Adjust the navigation menu for mobile */
    .main-navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px 0;
    }

    .main-navigation li a {
        font-size: 11px !important; /* Smaller font for mobile menu */
        letter-spacing: 0;
    }
}
@media (max-width: 768px) {
    /* Stack tiles 1-by-1 on mobile */
    .pillar-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0 20px;
    }

    .pillar-card {
        width: 100% !important;
        max-width: 350px; /* Prevents cards from getting too wide */
        margin: 0 auto;
        padding: 25px !important;
    }

    .pillar-card h3 {
        font-size: 18px !important;
    }

    .pillar-card p {
        font-size: 14px !important;
        line-height: 1.5;
    }
}
@media (max-width: 768px) {
    .hero-section {
        min-height: 280px !important;
        text-align: center;
    }

    .usp-title {
        font-size: 26px !important; /* Smaller headline for mobile */
        margin-bottom: 15px;
    }

    .usp-subtitle {
        font-size: 15px !important;
        padding: 0 15px;
    }
    
    .hero-button {
        width: 80%; /* Makes the button easier to tap */
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    /* Reduce overall header height */
    .sticky-header {
        padding: 10px 0 !important;
    }

    /* Shrink logo and center it */
    .site-logo {
        text-align: center;
        margin-bottom: 10px;
    }

    .site-logo img {
        max-width: 130px !important;
    }

    /* Stack menu items tightly to avoid the 'cut off' look */
    .main-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .main-navigation li a {
        font-size: 10px !important; /* Smaller text for 4-column menu */
        text-transform: uppercase;
        font-weight: bold;
        padding: 5px 2px !important;
    }
}
@media (max-width: 768px) {
    .pillar-grid-container {
        padding: 20px 15px !important;
    }

    .pillar-card {
        margin-bottom: 25px !important;
        padding: 20px !important;
        border-radius: 8px !important;
        /* Ensure the orange top border is visible */
        border-top: 5px solid #fb8c00 !important;
    }

    .pillar-icon span {
        font-size: 30px !important; /* Slightly smaller icons for mobile */
    }

    .pillar-card h3 {
        margin: 15px 0 10px 0 !important;
        font-size: 18px !important;
    }

    .pillar-card p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }

    .pillar-link {
        width: 100% !important; /* Full width buttons for easier thumb-tapping */
        padding: 10px 0 !important;
    }
}
@media (max-width: 768px) {
    .hero-section {
        min-height: 300px !important;
        background-position: center !important; /* Center the image on mobile */
    }

    .hero-overlay {
        background: rgba(26, 37, 47, 0.85) !important; /* Darker tint on mobile for readability */
    }

    .usp-title {
        font-size: 24px !important;
        text-align: center;
    }
}
@media (max-width: 768px) {
    /* 1. Reset the Grid Container */
    .pillar-grid-container {
        padding: 40px 20px !important; /* Standardized side-gap */
        max-width: 100% !important;
        margin: 0 !important; /* Removes any auto-centering shifts */
    }

    /* 2. Force Left-Alignment on the Grid */
    .pillar-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Forces cards to the left */
        gap: 25px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. The Card Precision */
    .pillar-card {
        width: 100% !important; /* Fills the available width minus container padding */
        margin-left: 0 !important; /* Strips any previous auto-centering */
        margin-right: 0 !important;
        padding: 25px !important;
        text-align: left !important; /* Ensures text inside isn't centered */
        box-sizing: border-box; /* Ensures padding doesn't push it off-screen */
    }

    /* 4. Align Icon and Headings to the left */
    .pillar-icon, .pillar-card h3, .pillar-card p {
        text-align: left !important;
        margin-left: 0 !important;
    }

    /* 5. The Link Button Alignment */
    .pillar-link {
        display: inline-block !important; /* Keeps it on the left */
        width: auto !important; /* Let it be as wide as the text */
        min-width: 140px; 
        text-align: center;
    }
}
@media (max-width: 768px) {
    /* 1. Center the entire footer container */
    .site-footer, 
    .footer-content-wrapper, 
    .footer-section {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. Center the lists (Pillars & Links) */
    .footer-section ul {
        padding: 0 !important;
        margin: 0 auto !important;
        list-style: none !important;
        display: inline-block !important; /* Ensures the list itself stays centered */
    }

    .footer-section li {
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    /* 3. Adjust Headings (Pillars & Professional Expertise) */
    .footer-section h4 {
        text-align: center !important;
        width: 100% !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    /* 4. Center the Jurisdiction & Copyright text */
    .footer-bottom-info, 
    .copyright-text, 
    .jurisdiction-note {
        text-align: center !important;
        width: 100% !important;
        padding: 0 10px !important;
    }
}
@media (max-width: 768px) {
    /* 1. Force the main container to stack vertically */
    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 2. Target the individual columns (Pillars, Expertise, etc.) */
    .footer-col {
        width: 100% !important;
        flex: none !important; /* Overrides the inline flex: 1 */
        padding: 20px 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Center the 'Pillars' and 'Professional Expertise' Headings */
    .footer-col h4 {
        text-align: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    /* 4. The "Pillars" List - Force the UL to be a centered block */
    .footer-col ul {
        display: block !important;
        padding: 0 !important;
        margin: 0 auto !important;
        list-style: none !important;
        width: 100% !important;
    }

    /* 5. The Links - Center the text inside the anchor tags */
    .footer-col li {
        text-align: center !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    .footer-col a {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
}
/* --- LANDSCAPE MODE OPTIMIZATION --- */
@media (max-width: 932px) and (orientation: landscape) {
    .hero-section {
        min-height: 250px !important; /* Shorter height for wide/short screens */
        padding: 20px 0 !important;
    }

    .usp-title {
        font-size: 22px !important; /* Smaller to keep it on 2 lines max */
    }

    .usp-subtitle {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* Stack the Pillar Tiles in 2 columns instead of 1 long column */
    .pillar-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }
}
@media (max-width: 932px) and (orientation: landscape) {
    .competency-grid {
        flex-direction: row !important; /* Side-by-side works better here */
        gap: 15px !important;
    }

    .about-flex {
        display: flex !important;
    flex-direction: row !important; /* Forces image and text side-by-side */
    align-items: center !important;
    gap: 40px !important;
    padding: 40px !important;
    background: #ffffff !important;
    border-left: 8px solid #fb8c00 !important; /* Orange Spine */
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    margin-bottom: 50px !important;
    }

    .about-image {
        flex: 0 0 250px !important; /* Smaller image for short screens */
    }
}

@keyframes ring-pulse {
    0% { box-shadow: 0 0 0 0 rgba(251, 140, 0, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(251, 140, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 140, 0, 0); }
}

@media (max-width: 768px) {
    .authority-grid { flex-direction: column; gap: 40px; }
    .border-left-right { border: none; }
}

@media (max-width: 768px) {
    .about-container, .brand-authority-wrapper {
        font-family: inherit !important; /* Forces mobile to keep the desktop font */
    }
}

/* 4. Mobile Responsiveness (Stacks for phones) */
@media (max-width: 768px) {
    .about-intro-container {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 20px !important;
        gap: 30px !important;
    }
    
    .about-photo-wrapper {
        flex: 0 0 auto !important;
        max-width: 200px !important;
    }
}
/* Qickstep Branding: Uniform Excerpt Boxes */
.entry-summary {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-left: 8px solid #fb8c00; /* Qickstep Brand Orange */
    border-radius: 8px;
    padding: 20px 25px;
    margin: 15px 0 30px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
    /* Text Styling */
    color: #444444;
    line-height: 1.7;
    font-size: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effect to match your Category Cards */
.entry-summary:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Styling the "Read More" or "..." inside the summary */
.entry-summary a.more-link {
    display: block;
    margin-top: 15px;
    color: #fb8c00;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
}