/*** ROOT START *******************************************************/
:root {
	--theme-color-1: #f4f4f4; /* (main body background color) */
	--theme-color-2: #000000; /* (main body text color) */
	--theme-color-3: #35424a; /* (menu & aside background) */
	--theme-color-4: #ffffff; /* (text color for menu & aside) */
	--theme-color-5: #e8491d; /* (red button1 background color) */	
	--theme-color-6: #00a0f8; /* (blue logo additional generic theme color example active link) */
	--theme-color-7: #00e6bd; /* (green logo additional generic theme color example link hover) */
	--theme-color-8: #00dbef; /* (light blue color matched additional generic theme color example link hover) */

	 /* RAG status colors */
	--theme-color-9: #92D050;  /* (Green - ON TRACK status) */
	--theme-color-10: #FFC000; /* (Amber - AT RISK status) */
	--theme-color-11: #FF0000; /* (Red - LATE status) */
	--theme-color-12: #0070C0; /* (Blue - COMPLETE status) */
	--theme-color-13: #808080; /* (Grey - DEFAULT status) */
	
	--li-background: var(--theme-color-4); /* (setting a default li background color. This will be used in lists and values passed dynamically from cold fusion) */
	--li-text: var(--theme-color-2); /* (setting a default li text color. This will be used in lists and values passed dynamically from cold fusion) */
	
	--oblong-background: var(--theme-color-4); /* (setting a default li background color. This will be used in lists and values passed dynamically from cold fusion) */
	--oblong-text: var(--theme-color-2); /* (setting a default li text color. This will be used in lists and values passed dynamically from cold fusion) */
	
	--theme-radius: 5px;
	--theme-margin: 5px;
}
/*** ROOT END *********************************************************/

/*** SITE GLOBAL START ************************************************/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Nunito', sans-serif;
}
/*** SITE GLOBAL END **************************************************/

/*** BODY START *******************************************************/
body {
	padding: 0;
	margin: 0;
	background-color: var(--theme-color-1);
	color: var(--theme-color-2);
    overflow-y: scroll; /* Show vertical scrollbar */	
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

h1:first-letter {
	color: var(--theme-color-6);
}

h2:first-letter {
	color: var(--theme-color-6);
}

.button1 {
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: none;
}

.button1:hover {
	background-color: transparent;
	color: var(--theme-color-4);
	padding: 5px 15px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	transition: all 0.3s ease-out;
}

.button2 {
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: none;
	font-family: inherit;
	font-size: 16px;
	display: block;
}

.button2:hover {
	background-color: var(--theme-color-7);
	color: var(--theme-color-2);
	padding: 6px 16px;
	border-radius: 4px;
	transition: all 0.3s ease-out;
}

.rag-status-on-track {
    background-color: var(--theme-color-9);
    color: white;
}

.rag-status-at-risk {
    background-color: var(--theme-color-10);
    color: white;
}

.rag-status-late {
    background-color: var(--theme-color-11);
    color: white;
}

.rag-status-complete {
    background-color: var(--theme-color-12);
    color: white;
}

.rag-status-default {
    background-color: var(--theme-color-13);
    color: white;
}
/*** BODY END *********************************************************/

/*** vue.js STYLE START *******************************************/

/* Table Controls */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* View Toggle */
.view-toggle {
    display: flex;
}

.view-toggle button {
    cursor: pointer;
    padding: 8px 16px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin-right: -1px;
}

.view-toggle button:first-child {
    border-radius: 4px 0 0 4px;
}

.view-toggle button:last-child {
    border-radius: 0 4px 4px 0;
}

.view-toggle button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Right Controls */
.right-controls {
    display: flex;
    align-items: center;
}

.right-controls > * {
    margin-left: 15px;
}

/* Show Completed Checkbox */
.right-controls label {
    display: flex;
    align-items: center;
}

.right-controls input[type="checkbox"] {
    margin-right: 5px;
}

/* Task Table - styles now managed by Vue scoped CSS in TaskTable.vue */

/* Table Footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 14px;
    flex-wrap: wrap;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
}

.pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    cursor: pointer;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Showing Entries */
.showing-entries {
    font-size: 14px;
}

/* Task Counter (if still needed) */
.task-counter {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-weight: bold;
}

/* Hierarchical structure styles */
.task-row {
    cursor: pointer;
}

.task-name-wrapper {
    display: flex;
    align-items: center;
}

.expander {
    display: inline-flex;
    width: 20px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 5px;
}

.expander-placeholder {
    display: inline-block;
    width: 20px;
}

.task-row.alternate-row { 
    background-color: #f8f8f8; 
}

.task-row.parent-task { 
    background-color: #e6f2ff; 
}

/* RAG Status Colors */
.rag-status-on-track { 
    background-color: #4CAF50; 
    color: white; 
}

.rag-status-at-risk { 
    background-color: #FFA500; 
    color: white; 
}

.rag-status-late { 
    background-color: #F44336; 
    color: white; 
}

.rag-status-complete { 
    background-color: #2196F3; 
    color: white; 
}

.rag-status-default { 
    background-color: #9E9E9E; 
    color: white; 
}

/* Add Task button */
.add-task-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 0 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.add-task-button:hover {
    background-color: #45a049;
}

.add-task-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
}

/* Cell content wrapper */
.cell-content {
    position: relative;
    z-index: 1;
}

/* Trigger highlight styles */
.trigger-highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    pointer-events: none;
}

/* RAG status colors for trigger highlights */
.rag-status-on-track.trigger-highlight { 
    background-color: #4CAF50; 
}

.rag-status-at-risk.trigger-highlight { 
    background-color: #FFA500; 
}

.rag-status-late.trigger-highlight { 
    background-color: #F44336; 
}

.rag-status-complete.trigger-highlight { 
    background-color: #2196F3; 
}

.rag-status-default.trigger-highlight { 
    background-color: #9E9E9E; 
}

/*** vue.js STYLE END ********************************************/





/*** CONTAINER STYLES START *******************************************/
.containerStyle1 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 80px auto auto auto 80px;
	grid-template-areas:
	"nav-container nav-container nav-container"
	"showcase showcase showcase"
	"blogSubscribe blogSubscribe blogSubscribe"
	"box1 box2 box3"
	"footer footer footer";	
}

.containerStyle2 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 80px auto 80px;
	grid-template-areas:
	"nav-container"
	"main-col"
	"footer";
}

.containerStyle3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 80px 80px auto 80px;
	grid-template-areas:
	"nav-container nav-container nav-container nav-container"
	"main-col main-col main-col main-col"
	"box1 box2 box3 box4"
	"footer footer footer footer";
}

.containerStyle4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 80px auto 80px;
	grid-template-areas:
	"nav-container nav-container"
	"main-col main-col2"
	"footer footer";
}

.containerStyle5 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 80px auto 80px;
	grid-template-areas:
	"nav-container"
	"article-col"
	"footer";
}
/*** CONTAINER STYLES END *********************************************/

/*** POPUP STYLE 3 START **********************************************/
.popUp ul {
	line-height: 175%;	
}

.popUp ul li {
	margin-top: 0.5em;
}

.popUp ul li ul {
	list-style-type: none;	
}
/*** POPUP STYLE 3 END ************************************************/

/*** MAIN-COL START ***************************************************/
.main-col {
	grid-area: main-col;
	padding: 15px;
	background-color: var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	min-width: 0;
}

.main-col .imgWidth80 img {
	display: block;
	width: 80%;
	margin-top: 1.5em;
	margin-left: auto;
	margin-right: auto;
}

.main-col .boxWidth40 {
	float: left;
	text-align: center;
	width: 40%;
	padding: 10px;
}

.main-col .boxWidth40 img {
	width: 100px;
}

.main-col ul {
	line-height: 175%;	
}

.main-col li {
	margin-top: 1.5em;
}

.main-col a {
	color: var(--theme-color-6);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

.main-col a:hover {
	color: var(--theme-color-5);
	font-weight: bold;
}

.notification {
	color: var(--theme-color-5);
}
/*** MAIN-COL END *****************************************************/

/*** MAIN-COL2 START **************************************************/
.main-col2 {
	grid-area: main-col2;
	padding: 15px;
	background-color: var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}

.main-col2 .imgWidth80 img {
	display: block;
	width: 80%;
	margin-top: 1.5em;
	margin-left: auto;
	margin-right: auto;
}

.main-col2 .boxWidth40 {
	float: left;
	text-align: center;
	width: 40%;
	padding: 10px;
}

.main-col2 .boxWidth40 img {
	width: 100px;
}

.main-col2 ul {
	line-height: 175%;	
}

.main-col2 li {
	margin-top: 1.5em;
}

.main-col2 a {
	color: var(--theme-color-6);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

.main-col2 a:hover {
	color: var(--theme-color-5);
	font-weight: bold;
}
/*** MAIN-COL2 END ****************************************************/

/*** SQUARE LINKS CONTAINER START *************************************/
.squareLinksContainer li {
    display: float-left;
    width: 200px;
    height: 200px;
    color: var(--li-text);
    border: 2px solid var(--li-background);
    background-color: var(--li-background);
    border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding: 5px;
	text-align: center;
}

.squareLinksContainer a {
	display: inline-block;
	color: var(--li-text); 
	text-decoration: none;
}

.squareLinksContainer li:hover {
	transition: all 0.4s ease-out;
	background-color: var(--theme-color-1);
	color: var(--theme-color-2); 
}
/*** SQUARE LINKS CONTAINER END ***************************************/

/*** DASHBOARD TILES CONTAINER START **********************************/
.dashboardTilesContainer li {
    display: float-left;
    width: 100px;
    height: 100px;
    color: var(--li-text);
    border: 2px solid var(--li-background);
    background-color: var(--li-background);
    border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding: 5px;
	text-align: center;
}

.dashboardTilesContainer a {
	display: inline-block;
	color: var(--li-text); 
	text-decoration: none;
}

.dashboardTilesContainer li:hover {
	transition: all 0.4s ease-out;
	background-color: var(--theme-color-1);
	color: var(--theme-color-2); 
}
/*** DASHBOARD TILES CONTAINER END ************************************/

/*** FORM STYLING START ***********************************************/
.formContainer50 {
	/*display: grid;*/
	grid-template-columns: 500px;
	align-items: start;
	justify-content: center;
	float: left;
	border-radius: var(--theme-radius);
	/*min-height: 100vh;*/
	margin: 0;
}

fieldset {
	margin: 1em 0;
	padding: 1em 2em;
	border:solid 1px var(--theme-color-3);
	border-radius:var(--theme-radius);
	min-width: 300px;
}

legend {
	font-size: 1.25em;
	padding: 0 .25em;
	border:var(--theme-color-3);
}

.form-control {
	margin-bottom: 10px;
	padding-bottom: 20px;
	position: relative; 
}  

.form-control label {
	/*display: inline-block;*/
	display: inline-block;
	margin-top: 1em;
	margin-bottom: 5px;
	line-height:25%;	
}

.form-control label:first-of-type {
	margin-top: 0;
}

.form-control input {
	border: 1px solid var(--theme-color-3);
	border-radius: var(--theme-radius);
	display: block;
	font-family: inherit;
	font-size: 14px;
	padding: 10px;
	width: 100%;
}

.form-control.success input {
	border-color: var(--theme-color-7);
}

.form-control.error input {
	border-color: var(--theme-color-5);
}

.form-control i {
	position: absolute;
	top: 40px;
	right: 10px;
	visibility: hidden;
}

.form-control.success i.fa-check-circle {
	color:  var(--theme-color-7);
	visibility: visible;
}

.form-control.error i.fa-exclamation-circle {
	color: var(--theme-color-5);
	visibility: visible;
}

.form-control small {
	visibility: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
}

.form-control.error small {
	color: var(--theme-color-5);
	visibility: visible;
}

.form button{
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: none;
	display: block;
	font-family: inherit;
	font-size: 16px;
	width: 100%;
}

.form button:hover {
	background-color: var(--theme-color-7);
	color: var(--theme-color-2);
	padding: 6px 16px;
	border-radius: 4px;
	/*border: solid 1px var(--theme-color-5);*/
	transition: all 0.3s ease-out;
}

/* Inputs & Textarea */
cfinput {padding: 5em;
border: solid 1px var(--theme-color-3);
}

cfinput[type="email"], cfinput[type="text"] {
	width: 20em;
}

cftextarea {
 	min-height: 8em;
	min-width: 100%;
	padding: 0.5em;
	border: solid 1px #999;
}
/*** FORM STYLING END *************************************************/

/*** NEW FORM ACTION STYLES FROM CLAUD START **************************/
.form-actions {
    margin-top: 20px;
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn {
    padding: 6px 16px;
    margin-left: 10px;
    font-family: inherit;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--theme-radius);
    transition: all 0.3s ease-out;
    width: auto; /* This ensures the button width is based on content */
    min-width: 100px; /* This sets a minimum width for consistency */
    max-width: 200px; /* This prevents buttons from becoming too wide */
}

.form-actions .btn-primary { 
    background-color: var(--theme-color-7); 
    color: var(--theme-color-3) !important; 
    border: 1px solid var(--theme-color-7);
}

.form-actions .btn-secondary { 
    background-color: var(--theme-color-6); 
    color: var(--theme-color-1) !important; 
    border: 1px solid var(--theme-color-6);
}

.form-actions .btn-danger { 
    background-color: var(--theme-color-5); 
    color: var(--theme-color-1) !important; 
    border: 1px solid var(--theme-color-5);
}

/* Hover styles */
.form-actions .btn-primary:hover, 
.form-actions .btn-secondary:hover, 
.form-actions .btn-danger:hover {
    background-color: var(--theme-color-3);
    transition: all 0.3s ease-out;
}

.form-actions .btn-primary:hover {
    color: var(--theme-color-1) !important;
    border-color: var(--theme-color-7);
}

.form-actions .btn-secondary:hover {
    color: var(--theme-color-1) !important;
    border-color: var(--theme-color-6);
}

.form-actions .btn-danger:hover {
    color: var(--theme-color-1) !important;
    border-color: var(--theme-color-5);
}
/*** NEW FORM STYLING FROM CLAUDE END *********************************/




/*** FORM SIDE BY SIDE STYLING START **********************************/
.formSideBySideContainer {
	/*display: grid;*/
	grid-template-columns: 500px;
	/*align-items: start;*/
	justify-content: center;
	float: left;
	border-radius: var(--theme-radius);
	/*min-height: 100vh;*/
	margin: 0;
}

.oblongContainer500 {
    display: inline-block;
    width: 500px;
    height: auto;
    color:var(--oblong-text);
    border: 2px solid var(--oblong-background);
    background-color:var(--oblong-background);
    border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding: 5px;
	text-align: center;
}

/*** NEW FORM ACTION STYLES FROM CLAUD END ****************************/

/*** GRID FORM TWO COLUMN START ***************************************/
.gridFormTwoColumn {
	background-color: white;
	border-radius: var(--theme-radius);
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 600px;
}

.gridFormTwoColumn ul {
  display: grid;
  grid: auto-flow / auto 1fr;
  line-height:100%;
}

.gridFormTwoColumn li {
  grid-column: span 2;
  display: grid;
  grid: subgrid;
  border: none;
  margin: 5px;    
}

.gridFormTwoColumn label {
  grid-column: 1;
  width: 200px;
  display: inline-block;
  float: left;
  white-space: nowrap;  
  font-weight: bold;
}

.gridFormTwoColumn input, .gridFormTwoColumn select {
  grid-column: 2;
  width: 200px;
  float: right;
  display: inline-block;
  box-sizing: border-box;
}

/*** GRID FORM TWO COLUMN END *****************************************/


/*** SHOWCASE START ***************************************************/
.showcase {
	grid-area: showcase;
	background-image: url('../images/showcase.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 500px;
	background-attachment: fixed;
	background-position: center;
	/*background-position: 0-100px;* I took this off as it didn't work for me and left a large white area at the bottom of the image when shrinking the browser width*/
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	text-align: center;
  	color: var(--theme-color-4);
}

.showcase h1 {
	margin-top:100px;
	font-size:55px;
	margin-bottom:10px;
}

.showcase p {
	font-size:20px;
}
/*** SHOWCASE END *****************************************************/


/*** BLOGSUBSCRIBE START **********************************************/
.blogSubscribe {
	grid-area: blogSubscribe;
	padding:15px;
	color:var(--theme-color-4);
	background:var(--theme-color-3);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}

.blogSubscribe h1{
	float:left;
}

.blogSubscribe form{
	float:right;
/*	margin-top:15px;*/
	align-self: center;
	display: inline-block;
}

.blogSubscribe input[type="email"]{
	padding:4px;
	height:25px;
	width:250px;
}

.blogSubscribe button{
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	/*border: none;*/
	font-family: inherit;
	font-size: 16px;
	width: 100px;
}

.blogSubscribe button:hover {
	background-color: var(--theme-color-3);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	transition: all 0.3s ease-out;
}
/*** BLOGSUBSCRIBE END ************************************************/

/*** BOXES START ******************************************************/
.box1 {
	grid-area: box1;	
	text-align: center;
	background-color:var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.box2 {
	grid-area: box2;
	text-align: center;
	background-color:var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.box3 {
	grid-area: box3;
	text-align: center;
	background-color:var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.box4 {
	grid-area: box4;
	text-align: center;
	background-color:var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.boxWidth40{
	padding:10px;
	display: block;
	margin-left: auto;
	margin-right:auto;
	width:40%;
}

.boxWidth75{
	padding:10px;
	display: block;
	margin-left: auto;
	margin-right:auto;
	width:75%;
}

.boxWidth40 img, .boxWidth50 img{
	width:100px;
}
/*** BOXES END ********************************************************/

/*** STAYCONNECTED START **********************************************/
.stayConnected input[type="email"]{
	padding:4px;
	height:40px;
	width:100px;
}

.stayConnected button{
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 4px 16px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	font-family: inherit;
	font-size: 16px;
	width: 100px;
}

.stayConnected button:hover {
	background-color: var(--theme-color-3);
	color: var(--theme-color-4);
	padding: 4px 16px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	transition: all 0.3s ease-out;
}
/*** STAYCONNECTED END ************************************************/

/*** INVOICE START ****************************************************/

/*** CONTAINER INVOICE SCREEN START ***********************************/
.containerInvoiceScreen {
	background-color: white;
	display: grid;
	grid-template-columns: 12.4% 12.4% 12.4% 12.4% 0.8% 12.4% 12.4% 12.4% 12.4%;
	grid-template-rows: 125px 125px 185px 30px minmax(300px, auto) 100px 175px;
	grid-template-areas:
	"row1 row1 row1 row1 row1 row1 row1 row1 row1"
	"row2 row2 row2 row2 row2 row2 row2 row2 row2"
	"row3 row3 row3 row3 row3 row3 row3 row3 row3"
	"row4 row4 row4 row4 row4 row4 row4 row4 row4"
	"row5 row5 row5 row5 row5 row5 row5 row5 row5"
	"row6 row6 row6 row6 row6 row6 row6 row6 row6"
	"row7 row7 row7 row7 row7 row7 row7 row7 row7";
	align-self: stretch;
}
/*** CONTAINER INVOICE SCREEN END *************************************/
.row1{
	grid-area: row1;
	border-bottom: 2px solid black;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceLogo {
	/*grid-area: invoiceLogo;*/
	background-color: white;
	/*border-radius: var(--theme-radius);*/
	/*margin: var(--theme-margin);*/
	/*border-bottom: 2px solid black;*/
	padding-bottom: 5px;
	margin-top: 5px;
    height: 100%;
    float: right;
}

.invoiceLogo img {
	max-width: 100%;
    max-height: 100%;
    float: right;
}

.row2{
	grid-area: row2;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceParadigmAddress {
/*	grid-area: invoiceParadigmAddress;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	float: left;
	vertical-align: middle;
	/*border: 1px solid black;*/
	padding: 5px;
	margin-top: 5px;
	
}

.invoiceInvoice {
	/*grid-area: invoiceInvoice;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	padding: 5px;
	margin-top: 5px;
	float: right;
}

.invoiceInvoice h3 {
	float: right;
}

.row3{
	grid-area: row3;
	border-bottom: 2px solid black;
	display: inline-block;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceCompanyAddress {
	/*grid-area: invoiceCompanyAddress;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	/*vertical-align: middle;*/
	border: 1px solid black;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	float: left;
	width: 49.5%;
	height: 95%;
}

.invoiceHeaderInformation {
	/*grid-area: invoiceHeaderInformation;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	border: 1px solid black;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	float: right;
	width: 49.5%;
	height: 95%;
}

.invoiceHeaderInformation ul {
  display: grid;
  grid: auto-flow / auto 1fr;
  line-height:100%;
  background-color: white;
}

.invoiceHeaderInformation li {
  grid-column: span 2;
  display: grid;
  grid: subgrid;
  border: none;
  margin: 5px;    
  background-color: white;
  font-weight: bold;
}

.invoiceHeaderInformation label {
  grid-column: 1;
  width: 50px;
  display: inline-block;
  float: left;
  white-space: nowrap; 
}

.invoiceHeaderInformation input {
  grid-column: 2;
  float: right;
  display: inline-block;
}

.row4{
	grid-area: row4;
	background-color: white;
	border-bottom: 2px solid black;
	display: inline-block;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceDescriptionHeader {
	background-color: white;
	font-weight: bold;
	width: 62.5%;
	float: left;
}

.invoiceUnitsHeader {
	background-color: white;
	font-weight: bold;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceRateHeader {
	background-color: white;
	font-weight: bold;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceAmountHeader {
	background-color: white;
	font-weight: bold;
	text-align: right;
	width: 12.5%;
	float: left;
}

.row5 {
	grid-area: row5;
	background-color: white;
	border-bottom: 2px solid black;
	display: inline-block;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceDescriptionValues {
	background-color: white;
	border-right: 1px solid black;
	width: 62.5%;
	float: left;
}

.invoiceUnitsValues {
	background-color: white;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceRateValues {
	background-color: white;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceAmountValues {
	background-color: white;
	text-align: right;
	width: 12.5%;
	float: left;
}

.row6 {
	grid-area: row6;
	background-color: white;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceTotalHeadings {
	background-color: white;
	width: 12.5%;
	float: right;
	padding-top: 10px;
	font-weight: bold;
}

.invoiceTotalValues {
	background-color: white;
	width: 12.5%;
	float: right;
	padding-top: 10px;
	font-weight: bold;
	text-align: right;
}

.invoiceTotalValues p:first-of-type {
	border-top: 1px solid black;
}

.invoiceTotalValues p:last-of-type {
	border-top: 1px solid black;
	border-bottom: 2px solid black;
}

.row7 {
	grid-area: row7;
	background-color: white;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceBankDetails {
	background-color: white;
	float: left;
	padding-top: 10px;
}

.invoiceBankDetails h3 {
	text-decoration: underline;
}

.invoiceBankDetails th {
	text-align: left;
}

/* HERE************************************************************************************************************************* */

/*** INVOICE END ******************************************************/





/*** SERVICES START ***************************************************/
ul#ourServices li{
	list-style:none;
	/*padding:10px;*/
	border:cccccc solid 1px;
	margin-bottom:5px;
	/*background-color:var(--theme-color-3);*/
}

ul#ourServices li.themeColor7 h3, ul#ourServices b.themeColor7{
 color:var(--theme-color-7);
}

ul#ourServices li.themeColor6 h3, ul#ourServices b.themeColor6{
 color:var(--theme-color-6);
}

ul#ourServices li.themeColor5 h3, ul#ourServices b.themeColor5{
 color:var(--theme-color-5);
}

ul.logoBullet {
    /*display: list-item;*/
    margin-left: 5em;
    list-style-image: url('@images/logoBullet.png');
	/*list-style-image: url(images/logoBullet.png);*/
}


/*** SERVICES END *****************************************************/


/*** SIDEBAR START ****************************************************/
.sidebar {
	display: none;
	grid-area: sidebar;
	padding:15px;
	background:var(--theme-color-3);
	color:var(--theme-color-4);
	margin-top:10px;
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	align-self: start;
}

.sidebar .moreInformation input, .sidebar .moreInformation textarea{
	width:100%;
	padding:5px;
	box-sizing: border-box;
}

.sidebar .moreInformation button{
		display:block;
		width:100%;
		margin-top:6px;
}

.sidebar .moreInformation label{
	font: 12px/1.5;
	padding:0;
	margin:0;
	color:var(--theme-color-1);
}

.sidebar .stayConnected input[type="email"]{
	width:100%;
	padding:5px;
	box-sizing: border-box;
}

.sidebar .stayConnected button{
		display:block;
		width:100%;
		margin-top:6px;
}

/*************TO DELETE AS REPLACED BY GENERIC NAV-LINKS
.sidebar a{
	color:var(--theme-color-4);
	text-decoration:none;
	font-size:16px;
}

.sidebar .active {
    color:var(--theme-color-7);
	font-weight:bold;
	text-decoration: none;
}

.sidebar a:hover{
	color: var(--theme-color-5);
	transition: all 0.2s ease-out;
}
**************************************************/

.sidebar ul {
	line-height:175%;	
}

.sidebar li {
	margin-top: 1.5em;	
}
/*** SIDEBAR END ******************************************************/


/*** FOOTER START *****************************************************/
footer {
	grid-area: footer;
	padding:5px;
	color:var(--theme-color-3);
	background-color:var(--theme-color-7);
	text-align:center;
	max-height:40px;
    clear: both;
    border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}
/*** FOOTER END *******************************************************/


/*** NAVIGATION START *************************************************/
.nav-container {
	/*width: 100%;*/
	grid-area: nav-container;
	background-color: var(--theme-color-3);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}

.navbar {
	display: grid;
	grid-template-columns: 0.2fr auto 1fr;
	align-items: center;
	height: 80px;
	width: 90%;
	max-width: 1720px;
	margin: 0 auto;	
}

#navbar-logo {
	color: var(--theme-color-4);
	justify-self: start;
	/*margin-left: 20px;*/
	white-space: nowrap;
}

.nav-menu {
	display: grid;
	grid-template-columns: repeat(9, auto);
	list-style: none;
	text-align: center;
	width: 90%;
	justify-self: end;
	align-items: center;
}

.active {
    color:var(--theme-color-7);
	font-weight:bold;
	text-decoration: none;
}

.nav-links {
	color: var(--theme-color-4);
	text-decoration: none;
}

.nav-links:hover {
	color: var(--theme-color-5);
	transition: all 0.2s ease-out;
}

.nav-links-btn {
	background-color: var(--theme-color-5);
	padding: 6px 16px;
	border-radius: 4px;
}

.nav-links-btn:hover {
	background-color: transparent;
	color: var(--theme-color-4);
	padding: 5px 15px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	transition: all 0.3s ease-out;
}

.menu-toggle .bar {
	width: 25px;
	height: 3px;
	margin: 5px auto;
	transition: all 0.3s ease-i-out;
	background: var(--theme-color-4);
}
/* Profile dropdown in navbar */
.nav-profile-dropdown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 4px;
}
.profile-trigger {
	cursor: pointer;
}
.profile-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--theme-color-7), var(--theme-color-6));
	overflow: hidden;
	text-decoration: none;
	transition: opacity 0.2s;
	color: #fff;
	font-size: 0;
}
.profile-link:hover {
	opacity: 0.8;
	color: #fff;
}
.profile-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profile-initials {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1;
}
.profile-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 180px;
	background: var(--theme-color-3);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	z-index: 1000;
	padding: 6px 0;
	margin-top: 4px;
	list-style: none;
}
.profile-menu::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}
.nav-profile-dropdown:hover .profile-menu,
.nav-profile-dropdown.open .profile-menu {
	display: block;
}
.profile-menu li {
	margin: 0;
	line-height: normal;
}
.profile-menu li a {
	display: block;
	padding: 8px 16px;
	color: var(--theme-color-4);
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
}
.profile-menu li a:hover {
	background: rgba(255,255,255,0.1);
	color: var(--theme-color-7);
}
/*** NAVIGATION END ***************************************************/

/*** MEDIA QUERIES START **********************************************/
@media screen and (max-width: 768px) {
	.containerStyle1 {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 80px auto auto auto auto auto 80px;
		grid-template-areas:
		"nav-container"
		"showcase"
		"blogSubscribe"
		"box1"
		"box2"
		"box3"
		"footer";	
	}

	.containerStyle2 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 80px;
		grid-template-areas:
		"nav-container"
		"main-col"
		"footer";
	}
	
	/*** CONTAINER STYLE 3 START ******************************************/
	.containerStyle3 {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto;
		grid-template-areas:
		"nav-container"
		"main-col"
		"box1"
		"box2"
		"box3"
		"box4"
		"footer";	
	}
/*** CONTAINER STYLE 3 END ********************************************/

	.nav-container {
		position: relative;
	}
	
	.nav-menu {
		display: grid;
		grid-template-columns: auto;
		background: var(--theme-color-5);
		margin: 0;
		width: 100%;
		position: absolute;
		top: 80px;
		left: -100%;
		opacity: 0;
		transition: all 0.5s ease;
		z-index: 1; /* I am not sure how z-index's work but without this, if I am on a page with a form, the form elements show throught he menu bar' */
	}
	
	#navbar-logo {
		margin-left: 20px;
	}
	
	.nav-menu.active {
		background: var(--theme-color-3);
		left: 0;
		opacity: 1;
		transition: all 0.5s ease;
	}
	
	.nav-links {
		text-align: center;
		line-height: 60px;
		width: 100%;
		display: table;
	}
	
	.nav-links:hover {
		background-color: var(--theme-color-5);
		color: var(--theme-color-4);
		transition: all 0.4s ease-out;
	}
	
	.navbar {
		width: 100%;
	}
	
	.nav-links-btn {
		border: none;
		padding: 0;
		border-radius: 0;
		background-color: var(--theme-color-3);
		color: var(--theme-color-4);
		transition: all 0.4s ease-out;
	}
	
	.nav-links-btn:hover {
		border: none;
		padding: 0;
		border-radius: 0;
		background-color: var(--theme-color-5);
		color: var(--theme-color-4);
		transition: all 0.4s ease-out;
	}
	
	#mobile-menu {
		position: absolute;
		top: 20%;
		right: 5%;
		transform: translate(5%, 20%)
	}
	
	.menu-toggle .bar {
		display: block;
		cursor: pointer;
	}
	
	.menu-toggle:hover {
		cursor: pointer;
	}
	
	#mobile-menu.is-active .bar:nth-child(2) {
		opacity: 0;
	}
	
	#mobile-menu.is-active .bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	
	#mobile-menu.is-active .bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	
	.blogSubscribe h1, .blogSubscribe form{
		float:none;
		text-align:center;
		width:100%;
	}
	
}
/*** MEDIA QUERIES END ************************************************/

.displayCentreContainer {
	margin: auto;
	width: 80%;
	padding: 10px;
  }

.displayCentreContainer .centreContainerColor4Width80 {
	display: block;
	width:100%;
	background:var(--theme-color-4);
	color:var(--theme-color-2);
	border-radius: 15px;
	margin-top: 0px;
	margin-bottom: 5px;
	padding: 10px;
}

.displayCentreContainer h4 {
	font-size: x-large;
	margin-bottom: 20px;
}

.displayCentreContainer p {
	font-size: larger;
	margin-bottom: 20px;
}

.displayCentreContainer .displayGroupOne80 {
	display: block;
	width: 100%;	
	background: #00a0f8ac;
	color:var(--theme-color-4);
	border-radius: 15px;
	margin-top: 10px;
	margin-bottom: 30px;	
	padding:30px;
	overflow: auto;
}

.displayCentreContainer .displayGroupOne80 img {		
	width:50%;
	float: right;
	/*top right bottom left*/
	margin: 5px 5px 5px 15px;
	border-radius: 15px;
}

.displayCentreContainer .displayGroupOne80 a {		
	color:var(--theme-color-4);
}

.displayCentreContainer .active {
    color:var(--theme-color-7);
	font-weight:bold;
	text-decoration: none;
}

.displayCentreContainer .nav-links {
	color: var(--theme-color-4);
	text-decoration: none;
}

.displayCentreContainer .nav-links:hover {
	color: var(--theme-color-5);
	transition: all 1.0s ease-out;
}

/*
.nav-links {
	text-align: center;
	line-height: 60px;
	width: 100%;
	display: table;
}

.nav-links:hover {
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	transition: all 0.4s ease-out;
}
*/

.displayCentreContainer .displayGroupTwo80 {
	display: block;
	width: 100%;	
	background: #84f7cc;
	color:var(--theme-color-3);
	border-radius: 15px;
	margin-top: 10px;
	margin-bottom: 30px;	
	padding:30px;
	overflow: auto;
}

.displayCentreContainer .displayGroupTwo80 img {		
	width:50%;
	float: left;
	/*top right bottom left*/
	margin: 5px 15px 5px 5px;
	border-radius: 15px;
}

.displayCentreContainer .displayGroupTwo80 a {		
	color:var(--theme-color-3);
}

/*** OLD PUBLIC PAGE STYLES — DEPRECATED ******************************
 * containerStyle1, containerStyle2, containerStyle3, showcase,
 * blogSubscribe, box1-4, displayGroupOne80, displayGroupTwo80
 * These are replaced by pub-* classes below. Keep until all pages
 * are migrated, then remove.
 ***********************************************************************/

/*** PUBLIC PAGES DESIGN SYSTEM START *********************************/
/* ════════════════════════════════════════════════════════════════════════
   PARADIGM-ICT PUBLIC PAGES — DESIGN SYSTEM
   Extends the editorial design language from Perspectives articles
   across all public-facing pages. All classes use pub- prefix.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Extended Design Tokens ── */
:root {
    --pub-font-display: 'Nunito', sans-serif;
    --pub-font-body: 'Nunito', sans-serif;
    --pub-text-hero: clamp(36px, 5vw, 56px);
    --pub-text-hero-sub: clamp(18px, 2.2vw, 25px);
    --pub-text-section-title: clamp(26px, 3.5vw, 38px);
    --pub-text-card-title: clamp(18px, 2vw, 24px);
    --pub-text-body: 17px;
    --pub-text-body-large: 19px;
    --pub-text-small: 14px;
    --pub-text-label: 11px;
    --pub-space-xs: 8px;
    --pub-space-sm: 16px;
    --pub-space-md: 24px;
    --pub-space-lg: 48px;
    --pub-space-xl: 72px;
    --pub-space-2xl: 96px;
    --pub-charcoal: var(--theme-color-3);
    --pub-white: var(--theme-color-4);
    --pub-blue: var(--theme-color-6);
    --pub-green: var(--theme-color-7);
    --pub-text-primary: #1a1a1a;
    --pub-text-secondary: #555;
    --pub-text-muted: #888;
    --pub-text-on-dark: rgba(255, 255, 255, 0.9);
    --pub-text-on-dark-muted: rgba(255, 255, 255, 0.55);
    --pub-border-subtle: rgba(0, 161, 247, 0.08);
    --pub-bg-tinted: linear-gradient(135deg, rgba(0, 161, 247, 0.04) 0%, rgba(0, 231, 189, 0.06) 100%);
    --pub-bg-tinted-strong: linear-gradient(135deg, rgba(0, 161, 247, 0.07) 0%, rgba(0, 231, 189, 0.09) 100%);
    --pub-gradient-accent: linear-gradient(90deg, var(--pub-blue) 0%, var(--pub-green) 100%);
    --pub-gradient-accent-135: linear-gradient(135deg, var(--pub-blue), var(--pub-green));
    --pub-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --pub-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --pub-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --pub-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --pub-radius-sm: 5px;
    --pub-radius-md: 8px;
    --pub-radius-lg: 12px;
}

/* ── Container — Public Page Layout ── */
.containerPublic {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr auto;
    grid-template-areas:
        "nav-container"
        "pub-main"
        "footer";
    min-height: 100vh;
}

.pub-main {
    grid-area: pub-main;
}

/* ── Primary Hero — Home page ── */
.pub-hero {
    background: linear-gradient(rgba(53, 66, 74, 0.85), rgba(53, 66, 74, 0.85)), url('../images/showcase.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.pub-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pub-gradient-accent);
}

.pub-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--pub-space-2xl) var(--pub-space-lg);
    text-align: center;
}

.pub-hero h1 {
    font-family: var(--pub-font-display);
    font-size: var(--pub-text-hero);
    font-weight: 800;
    color: var(--pub-white);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 auto var(--pub-space-md) auto;
    max-width: 900px;
}

.pub-hero h1:first-letter {
    color: var(--pub-green);
}

.pub-hero-subtitle {
    font-size: var(--pub-text-hero-sub);
    color: var(--pub-text-on-dark);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}

/* ── Page Hero — Interior pages ── */
.pub-page-hero {
    background: var(--pub-charcoal);
    position: relative;
    overflow: hidden;
    padding: var(--pub-space-lg) var(--pub-space-lg);
}

.pub-page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pub-gradient-accent);
}

.pub-page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.pub-page-hero h1 {
    font-family: var(--pub-font-display);
    font-size: var(--pub-text-section-title);
    font-weight: 800;
    color: var(--pub-white);
    line-height: 1.2;
    margin: 0 0 var(--pub-space-sm) 0;
}

.pub-page-hero h1:first-letter {
    color: var(--pub-green);
}

.pub-page-hero-subtitle {
    font-size: var(--pub-text-body-large);
    color: var(--pub-text-on-dark-muted);
    line-height: 1.6;
    max-width: 700px;
    margin: 0;
}

/* ── Content Sections ── */
.pub-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--pub-space-md);
}

.pub-section {
    padding: var(--pub-space-xl) 0;
}

.pub-section-dark {
    background: var(--pub-charcoal);
    color: var(--pub-white);
    padding: var(--pub-space-xl) 0;
    position: relative;
}

.pub-section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pub-gradient-accent);
}

/* Suppress double gradient lines at section boundaries */
.pub-section-tinted + .pub-section-dark::before {
    display: none;
}

.pub-section-tinted + .pub-cta-dark::before {
    display: none;
}

.pub-hero + .pub-section-dark::before {
    display: none;
}

.pub-hero + .pub-section-tinted::before {
    display: none;
}

.pub-section-dark + .pub-cta-dark::before {
    display: none;
}

.pub-section-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pub-gradient-accent);
}

.pub-section-dark + .pub-section-tinted::before {
    display: none;
}

.pub-section-dark + .pub-section-dark::before {
    display: none;
}

.pub-section-tinted {
    background: var(--pub-bg-tinted);
    padding: var(--pub-space-xl) 0;
    position: relative;
}

.pub-section-tinted::before,
.pub-section-tinted::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pub-gradient-accent);
}

.pub-section-tinted::before {
    top: 0;
}

.pub-section-tinted::after {
    bottom: 0;
}

.pub-section-header {
    text-align: center;
    margin-bottom: var(--pub-space-lg);
}

.pub-section-label {
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    background: var(--pub-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--pub-space-sm);
}

.pub-section-dark .pub-section-label {
    color: var(--pub-green);
}

.pub-section-title {
    font-family: var(--pub-font-display);
    font-size: var(--pub-text-section-title);
    font-weight: 800;
    color: var(--pub-text-primary);
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin: 0;
}

.pub-section-title:first-letter {
    color: var(--pub-blue);
}

.pub-section-dark .pub-section-title {
    color: var(--pub-white);
}

.pub-section-dark .pub-section-title:first-letter {
    color: var(--pub-green);
}

.pub-section-subtitle {
    font-size: var(--pub-text-body-large);
    color: var(--pub-text-secondary);
    line-height: 1.6;
    max-width: 680px;
    margin: var(--pub-space-sm) auto 0 auto;
}

.pub-section-dark .pub-section-subtitle {
    color: var(--pub-text-on-dark-muted);
}

/* ── DDD Tiles — Discovery, Design, Delivery ── */
.pub-ddd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pub-space-md);
    max-width: 1200px;
    margin: 0 auto;
}

.pub-ddd-tile {
    background: var(--pub-charcoal);
    border-radius: var(--pub-radius-lg);
    padding: var(--pub-space-xl) var(--pub-space-lg);
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pub-ddd-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--pub-shadow-lg);
}

.pub-ddd-tile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pub-gradient-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pub-ddd-tile:hover::after {
    opacity: 1;
}

.pub-ddd-tile-icon {
    width: 200px;
    height: 200px;
    margin-bottom: var(--pub-space-md);
    border-radius: var(--pub-radius-md);
    overflow: hidden;
}

.pub-ddd-tile-icon img {
    width: 140%;
    height: 140%;
    object-fit: cover;
    margin: -20% 0 0 -20%;
}

.pub-ddd-tile-title {
    font-family: var(--pub-font-display);
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--pub-space-sm);
    background: var(--pub-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub-ddd-tile-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--pub-text-on-dark-muted);
    margin: 0;
    max-width: 280px;
}

.pub-ddd-tile-large {
    padding: var(--pub-space-xl) var(--pub-space-lg);
}

.pub-ddd-tile-large .pub-ddd-tile-icon {
    width: 140px;
    height: 140px;
    margin-bottom: var(--pub-space-md);
}

.pub-ddd-tile-large .pub-ddd-tile-title {
    font-size: 28px;
}

.pub-ddd-tile-large .pub-ddd-tile-text {
    font-size: var(--pub-text-body);
    max-width: 280px;
}

/* ── DDD Anchor Nav — Approach page in-page navigation ── */
.pub-ddd-nav {
    display: flex;
    justify-content: center;
    gap: var(--pub-space-sm);
    padding: var(--pub-space-md) 0;
    max-width: 600px;
    margin: 0 auto;
}

.pub-ddd-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    color: var(--pub-text-on-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.pub-ddd-nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.pub-ddd-nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.pub-ddd-nav-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Proof Points / Stats ── */
.pub-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pub-space-md);
}

.pub-proof-card {
    background: var(--pub-white);
    border-radius: var(--pub-radius-md);
    padding: var(--pub-space-md) var(--pub-space-md);
    border: 1px solid var(--pub-border-subtle);
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--pub-blue), var(--pub-green)) 1;
    border-image-slice: 0 0 0 1;
    transition: box-shadow 0.2s ease;
}

.pub-proof-card:hover {
    box-shadow: var(--pub-shadow-md);
}

.pub-proof-label {
    font-size: var(--pub-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pub-text-muted);
    margin-bottom: var(--pub-space-xs);
}

.pub-proof-headline {
    font-size: var(--pub-text-card-title);
    font-weight: 800;
    color: var(--pub-text-primary);
    line-height: 1.3;
    margin-bottom: var(--pub-space-xs);
}

.pub-proof-detail {
    font-size: var(--pub-text-small);
    color: var(--pub-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.pub-section-dark .pub-proof-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pub-section-dark .pub-proof-label {
    color: var(--pub-text-on-dark-muted);
}

.pub-section-dark .pub-proof-headline {
    color: var(--pub-white);
}

ul.pub-proof-detail {
    list-style-type: disc;
}

ul.pub-proof-detail li {
    margin-bottom: 6px;
}

.pub-section-dark .pub-proof-detail {
    color: var(--pub-text-on-dark-muted);
}

/* ── Approach Deep-Dive Sections ── */
.pub-approach-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pub-space-xl);
    align-items: start;
    padding: var(--pub-space-xl) 0;
    border-bottom: 1px solid #e8edf0;
}

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

.pub-approach-section.reversed {
    direction: rtl;
}

.pub-approach-section.reversed > * {
    direction: ltr;
}

.pub-approach-content h2 {
    font-family: var(--pub-font-display);
    font-size: 30px;
    font-weight: 800;
    color: var(--pub-text-primary);
    margin: 0 0 var(--pub-space-md) 0;
    line-height: 1.2;
}

.pub-approach-content h2:first-letter {
    color: var(--pub-blue);
}

.pub-approach-content p {
    font-size: var(--pub-text-body);
    line-height: 1.85;
    color: var(--pub-text-secondary);
    margin: 0 0 1.2em 0;
}

.pub-approach-content p:last-child {
    margin-bottom: 0;
}

.pub-approach-visual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ── Case Study Cards ── */
.pub-case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pub-space-md);
}

.pub-case-card {
    background: var(--pub-white);
    border-radius: var(--pub-radius-md);
    padding: var(--pub-space-lg) var(--pub-space-md);
    border: 1px solid #e8edf0;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.pub-case-card:hover {
    box-shadow: var(--pub-shadow-md);
}

.pub-case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pub-gradient-accent);
}

.pub-case-type {
    font-size: var(--pub-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pub-blue);
    margin-bottom: var(--pub-space-xs);
}

.pub-case-profile {
    font-size: var(--pub-text-body-large);
    font-weight: 800;
    color: var(--pub-text-primary);
    line-height: 1.3;
    margin-bottom: var(--pub-space-sm);
}

.pub-case-situation {
    font-size: var(--pub-text-body);
    line-height: 1.7;
    color: var(--pub-text-secondary);
    margin-bottom: var(--pub-space-sm);
}

.pub-case-result {
    font-size: var(--pub-text-small);
    line-height: 1.6;
    color: var(--pub-text-primary);
    font-weight: 600;
    padding-top: var(--pub-space-sm);
    border-top: 1px solid #e8edf0;
}

.pub-case-result strong {
    color: var(--pub-blue);
}

/* ── Practice Model / Associates ── */
.pub-practice-intro {
    font-size: var(--pub-text-body-large);
    line-height: 1.8;
    color: var(--pub-text-secondary);
    max-width: 800px;
    margin: 0 auto var(--pub-space-lg) auto;
    text-align: center;
}

.pub-associate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--pub-space-md);
}

.pub-associate-card {
    background: var(--pub-white);
    border-radius: var(--pub-radius-md);
    padding: var(--pub-space-md);
    border: 1px solid #e8edf0;
    display: flex;
    align-items: flex-start;
    gap: var(--pub-space-sm);
}

.pub-associate-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e8edf0;
}

.pub-associate-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pub-associate-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--pub-text-primary);
}

.pub-associate-specialism {
    font-size: var(--pub-text-small);
    font-weight: 600;
    color: var(--pub-blue);
}

.pub-associate-bio {
    font-size: 13px;
    color: var(--pub-text-secondary);
    line-height: 1.5;
    margin-top: 4px;
}

/* ── Callout / CTA Blocks ── */
.pub-cta-block {
    padding: var(--pub-space-lg) var(--pub-space-lg);
    background: var(--pub-bg-tinted-strong);
    border: 1px solid var(--pub-border-subtle);
    border-left: 5px solid transparent;
    border-image: linear-gradient(180deg, var(--pub-blue), var(--pub-green)) 1;
    max-width: 800px;
    margin: 0 auto;
}

.pub-cta-text {
    font-size: var(--pub-text-body);
    line-height: 1.7;
    color: var(--pub-charcoal);
    margin: 0 0 var(--pub-space-md) 0;
}

.pub-cta-button {
    display: inline-block;
    padding: 14px 32px;
    background: var(--pub-gradient-accent-135);
    color: white !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    border-radius: var(--pub-radius-sm);
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 161, 247, 0.2);
}

.pub-cta-button:hover {
    background: linear-gradient(135deg, var(--pub-green), var(--pub-blue)) !important;
    box-shadow: 0 4px 16px rgba(0, 161, 247, 0.3);
    transform: translateY(-1px);
}

.pub-cta-dark {
    background: var(--pub-charcoal);
    padding: var(--pub-space-xl) var(--pub-space-lg);
    text-align: center;
    position: relative;
}

.pub-cta-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pub-gradient-accent);
}

.pub-cta-dark-title {
    font-family: var(--pub-font-display);
    font-size: var(--pub-text-section-title);
    font-weight: 800;
    color: var(--pub-white);
    margin: 0 0 var(--pub-space-sm) 0;
}

.pub-cta-dark-title:first-letter {
    color: var(--pub-green);
}

.pub-cta-dark-text {
    font-size: var(--pub-text-body);
    color: var(--pub-text-on-dark-muted);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto var(--pub-space-md) auto;
}

/* ── AI Awareness Callout — Full-width statement band ── */
.pub-ai-callout {
    display: flex;
    align-items: center;
    gap: var(--pub-space-lg);
    max-width: 900px;
    margin: 0 auto;
    padding: var(--pub-space-lg) 0;
}

.pub-ai-callout-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: var(--pub-gradient-accent-135);
    border-radius: var(--pub-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 4px 20px rgba(0, 161, 247, 0.25);
}

.pub-ai-callout-content h4 {
    font-family: var(--pub-font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    color: var(--pub-white);
    margin: 0 0 var(--pub-space-sm) 0;
    line-height: 1.2;
}

.pub-ai-callout-content h4:first-letter {
    color: var(--pub-green);
}

.pub-ai-callout-content p {
    font-size: var(--pub-text-body-large);
    line-height: 1.75;
    color: var(--pub-text-on-dark-muted);
    margin: 0;
}

/* ── Newsletter / Subscribe ── */
.pub-subscribe {
    background: var(--pub-charcoal);
    padding: var(--pub-space-lg) var(--pub-space-lg);
    text-align: center;
}

.pub-subscribe-title {
    font-family: var(--pub-font-display);
    font-size: var(--pub-text-card-title);
    font-weight: 800;
    color: var(--pub-white);
    margin: 0 0 var(--pub-space-xs) 0;
}

.pub-subscribe-title:first-letter {
    color: var(--pub-green);
}

.pub-subscribe-text {
    font-size: var(--pub-text-small);
    color: var(--pub-text-on-dark-muted);
    margin: 0 0 var(--pub-space-md) 0;
}

.pub-subscribe-form {
    display: flex;
    justify-content: center;
    gap: var(--pub-space-xs);
    max-width: 460px;
    margin: 0 auto;
}

.pub-subscribe-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--pub-radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-family: var(--pub-font-body);
    font-size: var(--pub-text-small);
}

.pub-subscribe-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.pub-subscribe-input:focus {
    outline: none;
    border-color: var(--pub-green);
    background: rgba(255, 255, 255, 0.12);
}

.pub-subscribe-btn {
    padding: 12px 24px;
    background: var(--pub-gradient-accent-135);
    color: white;
    border: none;
    border-radius: var(--pub-radius-sm);
    font-family: var(--pub-font-body);
    font-size: var(--pub-text-small);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.pub-subscribe-btn:hover {
    background: linear-gradient(135deg, var(--pub-green), var(--pub-blue));
    box-shadow: 0 4px 12px rgba(0, 161, 247, 0.3);
}

/* ── Contact Page ── */
.pub-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--pub-space-md);
    max-width: 800px;
    margin: 0 auto;
}

.pub-contact-card {
    background: var(--pub-white);
    border-radius: var(--pub-radius-md);
    padding: var(--pub-space-md);
    border: 1px solid #e8edf0;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pub-space-xs);
}

.pub-contact-card:hover {
    box-shadow: var(--pub-shadow-md);
    border-color: var(--pub-blue);
}

.pub-contact-icon {
    width: 48px;
    height: 48px;
    background: var(--pub-bg-tinted-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--pub-space-xs);
}

.pub-contact-icon svg {
    width: 22px;
    height: 22px;
    color: var(--pub-blue);
}

.pub-contact-label {
    font-size: var(--pub-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pub-text-muted);
}

.pub-contact-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--pub-text-primary) !important;
    text-decoration: none !important;
    text-transform: none !important;
}

/* ── Utility Classes ── */
.pub-text-gradient {
    background: var(--pub-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub-divider {
    height: 1px;
    background: #e8edf0;
    border: none;
    margin: var(--pub-space-lg) 0;
}

.pub-divider-gradient {
    height: 3px;
    background: var(--pub-gradient-accent);
    border: none;
    margin: 0;
}

.pub-max-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pub-max-1000 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Public Footer ── */
.pub-footer {
    grid-area: footer;
    background: var(--pub-green);
    color: var(--pub-charcoal);
    text-align: center;
    padding: var(--pub-space-sm);
    font-size: var(--pub-text-small);
    font-weight: 600;
}

/* ── Public Pages Responsive ── */
@media screen and (max-width: 768px) {
    .pub-hero-inner {
        padding: var(--pub-space-lg) var(--pub-space-md);
    }
    .pub-page-hero {
        padding: var(--pub-space-md);
    }
    .pub-ddd-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
    .pub-proof-grid {
        grid-template-columns: 1fr;
    }
    .pub-approach-section {
        grid-template-columns: 1fr;
        gap: var(--pub-space-md);
    }
    .pub-approach-section.reversed {
        direction: ltr;
    }
    .pub-case-grid {
        grid-template-columns: 1fr;
    }
    .pub-subscribe-form {
        flex-direction: column;
    }
    .pub-cta-block {
        padding: var(--pub-space-md);
    }
    .pub-cta-dark {
        padding: var(--pub-space-lg) var(--pub-space-md);
    }
    .pub-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    .pub-ddd-tile {
        padding: var(--pub-space-md) var(--pub-space-sm);
    }
    .pub-section {
        padding: var(--pub-space-lg) 0;
    }
}
/*** PUBLIC PAGES DESIGN SYSTEM END ***********************************/

/*** PARADIGM PERSPECTIVES ARTICLES START *****************************/

/* ════════════════════════════════════════════════════════════════════ */
/* ARTICLE COLUMN — replaces main-col for containerStyle5             */
/* ════════════════════════════════════════════════════════════════════ */
.article-col {
	grid-area: article-col;
	margin: var(--theme-margin);
	margin-right: 0;
	overflow: visible;
}

/* ════════════════════════════════════════════════════════════════════ */
/* PERSPECTIVES MASTHEAD — publication branding bar                    */
/* ════════════════════════════════════════════════════════════════════ */
.perspectives-masthead {
	background: var(--theme-color-3);
	padding: 0 48px;
	border-radius: var(--theme-radius) var(--theme-radius) 0 0;
}

.perspectives-masthead-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.perspectives-masthead-link {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none !important;
}

.perspectives-masthead-logo {
	height: 40px;
	width: auto;
}

.perspectives-masthead-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.perspectives-masthead-title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--theme-color-6) 0%, var(--theme-color-7) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.perspectives-masthead-subtitle {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45) !important;
	letter-spacing: 0.5px;
}

.perspectives-masthead-back {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	letter-spacing: 0.8px !important;
	transition: color 0.2s ease !important;
}

.perspectives-masthead-back:hover {
	color: var(--theme-color-7) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* PILLAR TAGS                                                        */
/* ════════════════════════════════════════════════════════════════════ */
.pillar-tag {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.pillar-tag.discovery {
	background-color: var(--theme-color-6);
	color: var(--theme-color-4);
}

.pillar-tag.design {
	background-color: var(--theme-color-7);
	color: var(--theme-color-3);
}

.pillar-tag.deliver {
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
}

/* ---- Article Listing Page ---- */
.article-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.article-card {
	margin-bottom: 25px;
	padding: 20px 0;
	border-bottom: 1px solid #e0e0e0;
}

.article-card:last-child {
	border-bottom: none;
}

.article-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.article-card-meta {
	font-size: 13px;
	color: #777;
}

.article-card h3 {
	margin: 0 0 8px 0;
	font-size: 22px;
	line-height: 1.3;
}

.article-card h3 a {
	color: var(--theme-color-2) !important;
	text-decoration: none !important;
	text-transform: none !important;
	font-size: 22px !important;
}

.article-card h3 a:hover {
	color: var(--theme-color-6) !important;
}

.article-card-summary {
	font-size: 15px;
	line-height: 1.6;
	color: #555;
	margin: 0;
}

.article-card-read-more {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: bold;
	color: var(--theme-color-6) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
}

.article-card-read-more:hover {
	color: var(--theme-color-5) !important;
}

.article-list-empty {
	padding: 40px 0;
	text-align: center;
	color: #999;
	font-size: 16px;
}

/* ---- Pillar Filter ---- */
.pillar-filters {
	display: flex;
	gap: 8px;
	margin-bottom: 25px;
	flex-wrap: wrap;
}

.pillar-filter-btn {
	padding: 6px 16px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: var(--theme-color-4);
	color: var(--theme-color-2);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.3px;
}

.pillar-filter-btn:hover {
	border-color: var(--theme-color-6);
	color: var(--theme-color-6);
	transition: all 0.2s ease-out;
}

.pillar-filter-btn.active {
	background: var(--theme-color-3);
	color: var(--theme-color-4);
	border-color: var(--theme-color-3);
}

/* ==================================================================
   SINGLE ARTICLE PAGE — EDITORIAL REDESIGN v2 (containerStyle5)
   ================================================================== */

/* ════════════════════════════════════════════════════════════════════ */
/* ARTICLE HERO — charcoal banner with title, dek, author              */
/* ════════════════════════════════════════════════════════════════════ */
.article-hero {
	background: var(--theme-color-3);
	position: relative;
	overflow: hidden;
	border-radius: var(--theme-radius) var(--theme-radius) 0 0;
}

.article-hero-grid {
	display: grid;
	grid-template-columns: 60% 40%;
	min-height: 380px;
}

/* Left column — article content */
.article-hero-content {
	padding: 36px 48px 44px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.article-hero-back-link {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	transition: color 0.2s ease !important;
}

.article-hero-back-link:hover {
	color: var(--theme-color-7) !important;
}

/* Right column — publication branding */
.article-hero-branding {
	background: linear-gradient(135deg, rgba(0, 161, 247, 0.08) 0%, rgba(0, 231, 189, 0.12) 100%);
	border-left: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 40px;
}

.article-hero-branding-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	text-decoration: none !important;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.article-hero-branding-link:hover {
	opacity: 1;
}

.article-hero-branding-logo {
	height: 130px;
	width: auto;
	flex-shrink: 0;
}

.article-hero-branding-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.article-hero-branding-title {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--theme-color-6) 0%, var(--theme-color-7) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.2;
}

.article-hero-branding-subtitle {
	font-size: 16px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.4) !important;
	letter-spacing: 0.5px;
}

.article-hero .article-title {
	font-size: 44px;
	line-height: 1.12;
	margin: 0 0 24px 0;
	color: var(--theme-color-4);
	font-weight: 800;
	letter-spacing: -0.5px;
	max-width: 85%;
}

/* Override the global h1:first-letter blue rule */
.article-hero .article-title:first-letter {
	color: var(--theme-color-7);
}

/* Dek / summary paragraph */
.article-dek {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	max-width: 680px;
	margin: 0 0 32px 0;
	font-weight: 400;
}

/* Meta row with author avatar */
.article-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.article-meta-author-block {
	display: flex;
	align-items: center;
	gap: 14px;
}

.article-meta-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--theme-color-6), var(--theme-color-7));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.article-meta-avatar span {
	color: white;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.article-meta-avatar-img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.2);
}

.article-meta-author-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.article-meta-author {
	font-size: 15px;
	font-weight: 700;
	color: var(--theme-color-4);
}

.article-meta-role {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.article-meta-details {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.article-meta-date {
	color: rgba(255, 255, 255, 0.6);
}

.article-meta-divider {
	color: rgba(255, 255, 255, 0.25);
	font-size: 18px;
}

.article-meta-read-time {
	color: rgba(255, 255, 255, 0.45);
}

/* Gradient bottom edge on hero */
.article-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--theme-color-6) 0%, var(--theme-color-7) 100%);
}

/* ════════════════════════════════════════════════════════════════════ */
/* ARTICLE CONTENT ZONE — white reading area                           */
/* ════════════════════════════════════════════════════════════════════ */
.article-content-zone {
	display: grid;
	grid-template-columns: 60% 40%;
}

.article-content-main {
	background: var(--theme-color-4);
	padding: 48px;
	overflow: visible;
	position: relative;
	z-index: 1;
	border-radius: 0 0 0 var(--theme-radius);
}

.article-content-accent {
	background: linear-gradient(135deg, rgba(0, 161, 247, 0.04) 0%, rgba(0, 231, 189, 0.06) 100%);
	background-color: #f0f7f5;
	border-left: 1px solid rgba(0, 161, 247, 0.08);
	position: relative;
	border-radius: 0 0 var(--theme-radius) 0;
	overflow: visible;
}

/* Accent column inner content */
.accent-inner {
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* ── Accent image ── */
.accent-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ── Share buttons ── */
.accent-share {
	display: flex;
	align-items: center;
	gap: 14px;
}

.accent-share-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(0, 0, 0, 0.35);
}

.accent-share-buttons {
	display: flex;
	gap: 8px;
}

.accent-share-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(0, 161, 247, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--theme-color-3) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	font-family: inherit;
}

.accent-share-btn:hover {
	background: var(--theme-color-6) !important;
	color: white !important;
	border-color: var(--theme-color-6) !important;
	transform: translateY(-1px);
}

.accent-share-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ── About Paradigm-ICT card ── */
.accent-about {
	padding: 24px 20px;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 10px;
	border: 1px solid rgba(0, 161, 247, 0.1);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.accent-about-logo {
	width: 48px;
	height: auto;
	margin-bottom: 4px;
}

.accent-about-label {
	font-size: 15px;
	font-weight: 800;
	color: var(--theme-color-3);
}

.accent-about-text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--theme-color-3);
	opacity: 0.75;
	margin: 0;
}

.accent-about-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--theme-color-6) !important;
	text-decoration: none !important;
	margin-top: 4px;
}

.accent-about-link:hover {
	color: var(--theme-color-7) !important;
}

/* ── Pillar badge ── */
.accent-pillar {
	padding: 20px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	border: 1px solid rgba(0, 161, 247, 0.1);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.accent-pillar-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(0, 0, 0, 0.35);
}

.accent-pillar-name {
	font-size: 18px;
	font-weight: 800;
	color: var(--theme-color-6);
}

.accent-pillar-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--theme-color-3);
	opacity: 0.7;
}

/* ── Accent quotes — coloured card style ── */
.accent-quote {
	padding: 24px 22px;
	border-radius: 10px;
}

.accent-quote p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--theme-color-3);
	font-style: italic;
	font-weight: 700;
	margin: 0;
}

.accent-quote-blue {
	background: rgba(0, 161, 247, 0.12);
	border: 1px solid rgba(0, 161, 247, 0.18);
}

.accent-quote-green {
	background: rgba(0, 231, 189, 0.15);
	border: 1px solid rgba(0, 231, 189, 0.22);
}

/* ── Mini newsletter ── */
.accent-newsletter {
	padding: 24px 20px;
	background: var(--theme-color-3);
	border-radius: 10px;
	color: var(--theme-color-4);
}

.accent-newsletter-label {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: var(--theme-color-4);
	margin-bottom: 8px;
}

.accent-newsletter-desc {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 16px 0;
}

.accent-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.accent-newsletter-input {
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.08);
	color: white;
	font-family: inherit;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.accent-newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.accent-newsletter-input:focus {
	outline: none;
	border-color: var(--theme-color-7);
	background: rgba(255, 255, 255, 0.12);
}

.accent-newsletter-btn {
	padding: 10px 20px;
	background: linear-gradient(135deg, var(--theme-color-6), var(--theme-color-7));
	color: white;
	border: none;
	border-radius: 5px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
}

.accent-newsletter-btn:hover {
	background: linear-gradient(135deg, var(--theme-color-7), var(--theme-color-6));
	box-shadow: 0 4px 12px rgba(0, 161, 247, 0.3);
}

/* ── Series badge ── */
.accent-series {
	padding: 20px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	border: 1px solid rgba(0, 161, 247, 0.1);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.accent-series-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(0, 0, 0, 0.35);
}

.accent-series-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--theme-color-3);
}

/* ── Sticky branding ── */
.accent-sticky {
	position: sticky;
	top: 24px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px 28px;
	background: var(--theme-color-3);
	border-radius: 10px;
	margin: 36px 24px 32px 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.accent-sticky-logo {
	width: 48px;
	height: auto;
	flex-shrink: 0;
}

.accent-sticky-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.accent-sticky-title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--theme-color-6) 0%, var(--theme-color-7) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.2;
}

.accent-sticky-subtitle {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════════════════════ */
/* ARTICLE BODY — typography and reading experience                    */
/* ════════════════════════════════════════════════════════════════════ */
.article-body {
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.85;
	font-size: 17px;
	color: #2d2d2d;
}

.article-body p {
	margin: 0 0 1.4em 0;
}

/* Lede paragraph — first paragraph */
.article-body > p:first-child {
	font-size: 21px;
	line-height: 1.65;
	color: #1a1a1a;
	font-weight: 400;
	margin-bottom: 1.8em;
}

/* ════════════════════════════════════════════════════════════════════ */
/* SECTION HEADINGS (h2) — chapter markers                             */
/* ════════════════════════════════════════════════════════════════════ */
.article-body h2 {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 1em 0;
	padding: 0;
	color: var(--theme-color-4);
	letter-spacing: -0.3px;
	position: relative;
}

/* Override h2:first-letter inside section bands */
.article-body h2:first-letter {
	color: var(--theme-color-7);
}

/* Remove any h2::after underline (the band provides visual weight) */
.article-body h2::after {
	display: none;
}

.article-body h3 {
	font-size: 21px;
	font-weight: 700;
	margin: 2em 0 0.6em 0;
	color: var(--theme-color-3);
}

/* ════════════════════════════════════════════════════════════════════ */
/* SECTION DIVIDERS (hr) — full-width charcoal section bands           */
/* ════════════════════════════════════════════════════════════════════ */
.article-body hr {
	border: none;
	margin: 3em 0 0 0;
	padding: 0;
	height: 0;
	background: none;
}

.article-body hr::after {
	display: none;
}

/* h2 that follows hr — tinted band with gradient left border */
.article-body hr + h2 {
	background: linear-gradient(135deg, rgba(0, 161, 247, 0.07) 0%, rgba(0, 231, 189, 0.09) 100%);
	color: var(--theme-color-3);
	margin: 0 -48px 1.2em -48px;
	padding: 24px 48px 24px 44px;
	font-size: 30px;
	border-left: 5px solid transparent;
	border-image: linear-gradient(180deg, var(--theme-color-6), var(--theme-color-7)) 1;
	border-bottom: none;
	position: relative;
}

.article-body hr + h2:first-letter {
	background: linear-gradient(90deg, var(--theme-color-6), var(--theme-color-7));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.article-body hr + h2::after {
	display: none;
}

/* ════════════════════════════════════════════════════════════════════ */
/* LINKS                                                               */
/* ════════════════════════════════════════════════════════════════════ */
.article-body a {
	color: var(--theme-color-6) !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(0, 161, 247, 0.3) !important;
	text-underline-offset: 2px !important;
	text-transform: none !important;
	font-size: inherit !important;
	font-weight: normal !important;
	transition: text-decoration-color 0.2s ease !important;
}

.article-body a:hover {
	color: var(--theme-color-6) !important;
	text-decoration-color: var(--theme-color-6) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* BLOCKQUOTES                                                         */
/* ════════════════════════════════════════════════════════════════════ */
.article-body blockquote {
	margin: 2em 0;
	padding: 20px 24px 20px 28px;
	border-left: 4px solid var(--theme-color-6);
	background: #f7f9fb;
	font-style: italic;
	color: #4a4a4a;
	border-radius: 0 6px 6px 0;
}

.article-body blockquote p {
	margin: 0;
}

/* ════════════════════════════════════════════════════════════════════ */
/* PULL QUOTE — stop-scrolling statement                               */
/* ════════════════════════════════════════════════════════════════════ */
.article-body .article-pull-quote {
	margin: 2.8em 0;
	padding: 36px 40px 36px 48px;
	background: linear-gradient(135deg, rgba(0, 161, 247, 0.05) 0%, rgba(0, 231, 189, 0.05) 100%);
	border-left: 6px solid var(--theme-color-6);
	font-size: 21px;
	line-height: 1.55;
	color: var(--theme-color-3);
	text-align: left;
	font-style: italic;
	font-weight: 600;
	position: relative;
}

/* Large decorative quote mark */
.article-body .article-pull-quote::before {
	content: '\201C';
	position: absolute;
	top: 8px;
	left: 14px;
	font-size: 56px;
	color: var(--theme-color-6);
	opacity: 0.2;
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════ */
/* CALLOUT BOX — editorial key takeaway                                */
/* ════════════════════════════════════════════════════════════════════ */
.article-body .article-callout {
	margin: 2.8em -48px;
	padding: 40px 48px;
	background: var(--theme-color-3);
	color: var(--theme-color-4);
	font-size: 20px;
	line-height: 1.7;
	font-weight: 500;
	position: relative;
	overflow: hidden;
}

/* "THE BOTTOM LINE" label */
.article-body .article-callout::before {
	content: 'THE BOTTOM LINE';
	display: block;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--theme-color-7);
	margin-bottom: 18px;
	font-weight: 800;
}

/* Gradient bottom accent */
.article-body .article-callout::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--theme-color-6), var(--theme-color-7));
}

.article-body .article-callout a {
	color: var(--theme-color-7) !important;
	text-decoration-color: rgba(0, 231, 189, 0.4) !important;
}

.article-body .article-callout a:hover {
	text-decoration-color: var(--theme-color-7) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* LISTS                                                               */
/* ════════════════════════════════════════════════════════════════════ */
.article-body ul, .article-body ol {
	margin: 1.2em 0 1.2em 1.6em;
	line-height: 1.85;
}

.article-body li {
	margin-top: 0.5em;
}

/* ════════════════════════════════════════════════════════════════════ */
/* ARTICLE FOOTER (inside body HTML from DB)                           */
/* ════════════════════════════════════════════════════════════════════ */
.article-body .article-footer {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid #e8edf0;
}

.article-body .article-footer-cta {
	font-size: 16px;
	line-height: 1.7;
	color: #555;
	font-style: italic;
}

.article-body .article-footer-cta a {
	color: var(--theme-color-6) !important;
	text-decoration: none !important;
	text-transform: none !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	border-bottom: 2px solid rgba(0, 161, 247, 0.25) !important;
	transition: border-color 0.2s ease !important;
}

.article-body .article-footer-cta a:hover {
	border-bottom-color: var(--theme-color-6) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* CTA CARD — conversation invitation                                    */
/* ════════════════════════════════════════════════════════════════════ */
.article-cta {
	max-width: 680px;
	margin: 3em auto 2em auto;
	padding: 36px 40px;
	background: linear-gradient(135deg, rgba(0, 161, 247, 0.06) 0%, rgba(0, 231, 189, 0.08) 100%);
	border: 1px solid rgba(0, 161, 247, 0.12);
	border-left: 5px solid transparent;
	border-image: linear-gradient(180deg, var(--theme-color-6), var(--theme-color-7)) 1;
	border-radius: 0;
	text-align: left;
}

.article-cta-text {
	font-size: 17px;
	line-height: 1.7;
	color: var(--theme-color-3);
	margin: 0 0 20px 0;
	font-weight: 400;
}

.article-cta-button {
	display: inline-block;
	padding: 12px 28px;
	background: linear-gradient(135deg, var(--theme-color-6), var(--theme-color-7));
	color: white !important;
	text-decoration: none !important;
	text-transform: none !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px;
	border-radius: 5px;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 8px rgba(0, 161, 247, 0.2);
}

.article-cta-button:hover {
	background: linear-gradient(135deg, var(--theme-color-7), var(--theme-color-6)) !important;
	box-shadow: 0 4px 16px rgba(0, 161, 247, 0.3);
	transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════ */
/* AUTHOR CARD SECTION                                                 */
/* ════════════════════════════════════════════════════════════════════ */
.article-author-section {
	padding: 0;
	margin-top: 16px;
}

.article-author-card {
	max-width: 680px;
	margin: 0 auto;
}

.article-author-card-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 28px 32px;
	background: #f7f9fb;
	border-radius: 8px;
	border: 1px solid #e8edf0;
}

.article-author-photo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--theme-color-6), var(--theme-color-7));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.article-author-initials {
	color: white;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
}

.article-author-photo-img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 3px solid #e8edf0;
}

.article-author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.article-author-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--theme-color-2);
}

.article-author-role {
	font-size: 14px;
	color: #555;
}

.article-author-org {
	font-size: 13px;
	color: #888;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.article-author-links {
	flex-shrink: 0;
}

.article-author-linkedin {
	color: var(--theme-color-6) !important;
	text-decoration: none !important;
	text-transform: none !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 8px 18px !important;
	border: 2px solid var(--theme-color-6) !important;
	border-radius: 5px !important;
	transition: all 0.2s ease !important;
	display: inline-block !important;
}

.article-author-linkedin:hover {
	background: var(--theme-color-6) !important;
	color: white !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* SERIES NAVIGATION                                                   */
/* ════════════════════════════════════════════════════════════════════ */
.article-series-section {
	padding: 0;
	margin-top: 16px;
}

.article-series {
	max-width: 680px;
	margin: 0 auto;
	padding: 28px 32px;
	background: #f7f9fb;
	border-radius: 8px;
	border: 1px solid #e8edf0;
}

.article-series-heading {
	font-size: 16px;
	font-weight: 700;
	color: var(--theme-color-3);
	margin-bottom: 16px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.article-series-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.article-series-list li {
	margin: 0 0 10px 0;
}

.article-series-list a {
	color: var(--theme-color-6) !important;
	text-decoration: none !important;
	text-transform: none !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	transition: color 0.2s ease !important;
}

.article-series-list a:hover {
	color: var(--theme-color-3) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* BOTTOM NAVIGATION                                                   */
/* ════════════════════════════════════════════════════════════════════ */
.article-bottom-nav {
	padding: 0;
	padding-top: 16px;
	padding-bottom: 8px;
}

.article-nav-link {
	display: inline-block;
	max-width: 680px;
	margin: 0 auto;
	padding: 24px 0 0 0;
	border-top: 1px solid #e8edf0;
	font-size: 13px;
	color: var(--theme-color-6) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	letter-spacing: 0.8px !important;
	transition: color 0.2s ease !important;
}

.article-nav-link:hover {
	color: var(--theme-color-3) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* ARTICLE 404                                                         */
/* ════════════════════════════════════════════════════════════════════ */
.article-not-found {
	text-align: center;
	padding: 80px 20px;
	background: var(--theme-color-4);
	border-radius: var(--theme-radius);
}

.article-not-found h2 {
	font-size: 28px;
	margin-bottom: 15px;
}

.article-not-found p {
	font-size: 16px;
	color: #777;
	margin-bottom: 20px;
}

/* ════════════════════════════════════════════════════════════════════ */
/* MOBILE RESPONSIVE (768px breakpoint)                                */
/* ════════════════════════════════════════════════════════════════════ */
@media(max-width: 768px) {

	.containerStyle5 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 80px;
		grid-template-areas:
		"nav-container"
		"article-col"
		"footer";
	}

	.article-hero-grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.article-hero-content {
		padding: 28px 20px 24px 20px;
	}

	.article-hero-back-link {
		margin-bottom: 16px;
	}

	.article-hero-branding {
		padding: 24px 20px;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		flex-direction: row;
		gap: 14px;
	}

	.article-hero-branding-link {
		flex-direction: row;
		gap: 12px;
	}

	.article-hero-branding-logo {
		height: 32px;
	}

	.article-hero-branding-title {
		font-size: 13px;
	}

	.article-hero-branding-subtitle {
		display: none;
	}

	.article-hero .article-title {
		font-size: 28px;
		max-width: 100%;
	}

	.article-dek {
		font-size: 15px;
	}

	.article-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.article-content-zone {
		grid-template-columns: 1fr;
	}

	.article-content-main {
		padding: 28px 20px;
	}

	.article-content-accent {
		display: none;
	}

	.accent-sticky {
		display: none;
	}

	.article-body > p:first-child {
		font-size: 18px;
	}

	/* Section dividers — mobile */
	.article-body hr + h2 {
		margin-left: -20px;
		margin-right: -20px;
		padding: 20px 20px 20px 16px;
		font-size: 24px;
	}

	.article-body .article-pull-quote {
		margin-left: -8px;
		margin-right: -8px;
		padding: 24px 20px 24px 28px;
		font-size: 18px;
	}

	.article-body .article-callout {
		margin-left: -20px;
		margin-right: -20px;
		padding: 24px 20px;
		font-size: 16px;
	}

	.article-cta {
		padding: 28px 20px;
	}

	.article-author-card-inner {
		flex-direction: column;
		text-align: center;
		padding: 24px 20px;
	}

	.article-author-info {
		align-items: center;
	}

	.article-series {
		padding: 20px;
	}
}

/*** PARADIGM PERSPECTIVES ARTICLES END *******************************/

/*** PUB PERSPECTIVES LISTING *****************************************/

.pub-pillar-filters {
    display: flex;
    gap: 8px;
    margin-bottom: var(--pub-space-lg);
    flex-wrap: wrap;
}

.pub-pillar-btn {
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--pub-font-body);
    letter-spacing: 0.5px;
    text-decoration: none;
    color: var(--pub-text-muted);
    background: var(--pub-bg-tinted);
    border: 1px solid var(--pub-border-subtle);
    transition: all 0.3s ease;
}

.pub-pillar-btn:hover {
    color: var(--pub-charcoal);
    border-color: var(--pub-blue);
}

.pub-pillar-active {
    background: var(--pub-charcoal);
    color: var(--pub-white);
    border-color: var(--pub-charcoal);
}

.pub-pillar-active:hover {
    color: var(--pub-white);
}

.pub-article-list {
    display: flex;
    flex-direction: column;
    gap: var(--pub-space-md);
}

.pub-article-card {
    padding: var(--pub-space-md);
    border: 1px solid var(--pub-border-subtle);
    border-left: 4px solid var(--pub-blue);
    border-radius: 8px;
    background: var(--pub-white);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pub-article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pub-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pub-pillar-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pub-pillar-discovery {
    background: rgba(24, 135, 204, 0.1);
    color: var(--pub-blue);
}

.pub-pillar-design {
    background: rgba(30, 176, 131, 0.1);
    color: var(--pub-green);
}

.pub-pillar-deliver {
    background: rgba(30, 58, 95, 0.1);
    color: var(--pub-charcoal);
}

.pub-article-date {
    font-size: 14px;
    color: var(--pub-text-muted);
}

.pub-article-title {
    font-family: var(--pub-font-heading);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    margin: 0 0 8px 0;
}

.pub-article-title a {
    color: var(--pub-charcoal);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pub-article-title a:hover {
    color: var(--pub-blue);
}

.pub-article-summary {
    font-size: 16px;
    color: var(--pub-text-muted);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.pub-article-read-more {
    font-size: 15px;
    font-weight: 600;
    color: var(--pub-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pub-article-read-more:hover {
    color: var(--pub-green);
}

@media (max-width: 600px) {
    .pub-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/*** PUB PERSPECTIVES LISTING END *************************************/