:root {
/* ========= #region   PRIMARY BRAND COLOR VARIABLES    ========= */
  /* Provide safe fallbacks so buttons still work if a utility is missing */
  --btn-bg: var(--black);
  --btn-fg: var(--white);
  --btn-bg-hover: color-mix(in srgb, var(--btn-bg) 85%, black);
  --btn-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  --btn-outline: var(--black);

  --pcob-maroon: var(--pcob-maroon-0);
  --pcob-maroon-dark: var(--pcob-maroon--2);
  --pcob-maroon-darker: var(--pcob-maroon--5);
  --pcob-maroon-darkest: var(--pcob-maroon--9);
  --pcob-maroon-light: var(--pcob-maroon-2);
  --pcob-maroon-lighter: var(--pcob-maroon-5);
  --pcob-maroon-lightest: var(--pcob-maroon-9);

  --pcob-orange: var(--pcob-orange-0);
  --pcob-orange-dark: var(--pcob-orange--2);
  --pcob-orange-darker: var(--pcob-orange--5);
  --pcob-orange-darkest: var(--pcob-orange--9);
  --pcob-orange-light: var(--pcob-orange-2);
  --pcob-orange-lighter: var(--pcob-orange-5);
  --pcob-orange-lightest: var(--pcob-orange-9);

  --pcob-burnt: var(--pcob-burnt-0);
  --pcob-burnt-dark: var(--pcob-burnt--2);
  --pcob-burnt-darker: var(--pcob-burnt--5);
  --pcob-burnt-darkest: var(--pcob-burnt--9);
  --pcob-burnt-light: var(--pcob-burnt-2);
  --pcob-burnt-lighter: var(--pcob-burnt-5);
  --pcob-burnt-lightest: var(--pcob-burnt-9);

  --pcob-purple: var(--pcob-purple-0);
  --pcob-purple-dark: var(--pcob-purple--2);
  --pcob-purple-darker: var(--pcob-purple--5);
  --pcob-purple-darkest: var(--pcob-purple--9);
  --pcob-purple-light: var(--pcob-purple-2);
  --pcob-purple-lighter: var(--pcob-purple-5);
  --pcob-purple-lightest: var(--pcob-purple-9);

  --pcob-pink: var(--pcob-pink-0);
  --pcob-pink-dark: var(--pcob-pink--2);
  --pcob-pink-darker: var(--pcob-pink--5);
  --pcob-pink-darkest: var(--pcob-pink--9);
  --pcob-pink-light: var(--pcob-pink-2);
  --pcob-pink-lighter: var(--pcob-pink-5);
  --pcob-pink-lightest: var(--pcob-pink-9);

  --pcob-yellow: var(--pcob-yellow-0);
  --pcob-yellow-dark: var(--pcob-yellow--2);
  --pcob-yellow-darker: var(--pcob-yellow--5);
  --pcob-yellow-darkest: var(--pcob-yellow--9);
  --pcob-yellow-light: var(--pcob-yellow-2);
  --pcob-yellow-lighter: var(--pcob-yellow-5);
  --pcob-yellow-lightest: var(--pcob-yellow-9);

  --pcob-teal: var(--pcob-teal-0);
  --pcob-teal-dark: var(--pcob-teal--2);
  --pcob-teal-darker: var(--pcob-teal--5);
  --pcob-teal-darkest: var(--pcob-teal--9);
  --pcob-teal-light: var(--pcob-teal-2);
  --pcob-teal-lighter: var(--pcob-teal-5);
  --pcob-teal-lightest: var(--pcob-teal-9);

  --pcob-turquoise: var(--pcob-turquoise-0);
  --pcob-turquoise-dark: var(--pcob-turquoise--2);
  --pcob-turquoise-darker: var(--pcob-turquoise--5);
  --pcob-turquoise-darkest: var(--pcob-turquoise--9);
  --pcob-turquoise-light: var(--pcob-turquoise-2);
  --pcob-turquoise-lighter: var(--pcob-turquoise-5);
  --pcob-turquoise-lightest: var(--pcob-turquoise-9);

  --pcob-grey: var(--pcob-grey-0);
  --pcob-grey-dark: var(--pcob-grey--2);
  --pcob-grey-darker: var(--pcob-grey--5);
  --pcob-grey-darkest: var(--pcob-grey--9);
  --pcob-grey-light: var(--pcob-grey-2);
  --pcob-grey-lighter: var(--pcob-grey-5);
  --pcob-grey-lightest: var(--pcob-grey-9);

  --pcob-stone: var(--pcob-stone-0);
  --pcob-stone-dark: var(--pcob-stone--2);
  --pcob-stone-darker: var(--pcob-stone--5);
  --pcob-stone-darkest: var(--pcob-stone--9);
  --pcob-stone-light: var(--pcob-stone-2);
  --pcob-stone-lighter: var(--pcob-stone-5);
  --pcob-stone-lightest: var(--pcob-stone-9);

  --pcob-white: var(--pcob-white-0);
  --pcob-white-dark: var(--pcob-white--2);
  --pcob-white-darker: var(--pcob-white--5);
  --pcob-white-darkest: var(--pcob-white--9);

  --pcob-smoke: var(--pcob-smoke-0);
  --pcob-smoke-dark: var(--pcob-smoke--2);
  --pcob-smoke-darker: var(--pcob-smoke--5);
  --pcob-smoke-darkest: var(--pcob-smoke--9);

  --white: #FFFFFF;
  --black: #000;

  /* =========    SECONDARY (SCALED) BRAND COLOR VARIABLES    ========= */

 /* === Chicago Maroon Scale === */
--pcob-maroon--9: #0D0306; /* darkest */
--pcob-maroon--8: #1B060D;
--pcob-maroon--7: #280913;
--pcob-maroon--6: #360C1A;
--pcob-maroon--5: #431021;
--pcob-maroon--4: #501327;
--pcob-maroon--3: #5E162E;
--pcob-maroon--2: #6B1934;
--pcob-maroon--1: #791C3B;
--pcob-maroon-0:  #861F41; /* VT Chicago Maroon (PMS 208) */
--pcob-maroon-1:  #923554;
--pcob-maroon-2:  #9E4C67;
--pcob-maroon-3:  #AA627A;
--pcob-maroon-4:  #B6788D;
--pcob-maroon-5:  #C38FA0;
--pcob-maroon-6:  #CFA5B3;
--pcob-maroon-7:  #DBBBC6;
--pcob-maroon-8:  #E7D2D9;
--pcob-maroon-9:  #F3E8EC; /* lightest */

/* === Burnt Orange Scale === */
--pcob-burnt--9: #170C04; /* darkest */
--pcob-burnt--8: #2E1707;
--pcob-burnt--7: #44230B;
--pcob-burnt--6: #5B2F0F;
--pcob-burnt--5: #723B13;
--pcob-burnt--4: #894616;
--pcob-burnt--3: #A0521A;
--pcob-burnt--2: #B65E1E;
--pcob-burnt--1: #CD6921;
--pcob-burnt-0:  #E5751F; /* VT Burnt Orange (PMS 158) */
--pcob-burnt-1:  #E78234;
--pcob-burnt-2:  #EA8F49;
--pcob-burnt-3:  #EC9C5E;
--pcob-burnt-4:  #EFA974;
--pcob-burnt-5:  #F1B689;
--pcob-burnt-6:  #F4C39E;
--pcob-burnt-7:  #F6D0B3;
--pcob-burnt-8:  #F9DDC8;
--pcob-burnt-9:  #FBEADD; /* lightest */

/* === Impact Orange Scale === */
  --pcob-orange--9: #140800; /* darkest */
  --pcob-orange--8: #281000;
  --pcob-orange--7: #3D1800;
  --pcob-orange--6: #512000;
  --pcob-orange--5: #652800;
  --pcob-orange--4: #792F00;
  --pcob-orange--3: #8D3700;
  --pcob-orange--2: #A23F00;
  --pcob-orange--1: #B64700;
  --pcob-orange-0:  #CA4F00; /* VT Impact Orange */
  --pcob-orange-1:  #CF611A;
  --pcob-orange-2:  #D57233;
  --pcob-orange-3:  #DA844D;
  --pcob-orange-4:  #DF9566;
  --pcob-orange-5:  #E5A780;
  --pcob-orange-6:  #EAB999;
  --pcob-orange-7:  #EFCAB3;
  --pcob-orange-8:  #F4DCCC;
  --pcob-orange-9:  #FAEDE6; /* lightest */

  /* === Pylon Purple Scale === */
  --pcob-purple--9: #0A040A; /* darkest */
  --pcob-purple--8: #140815;
  --pcob-purple--7: #1E0B1F;
  --pcob-purple--6: #280F29;
  --pcob-purple--5: #321334;
  --pcob-purple--4: #3C173E;
  --pcob-purple--3: #461B48;
  --pcob-purple--2: #501E52;
  --pcob-purple--1: #5A225D;
  --pcob-purple-0:  #642667; /* VT Pylon Purple */
  --pcob-purple-1:  #743C76;
  --pcob-purple-2:  #835185;
  --pcob-purple-3:  #936895;
  --pcob-purple-4:  #A27DA4;
  --pcob-purple-5:  #B192B3;
  --pcob-purple-6:  #C1A8C2;
  --pcob-purple-7:  #D0BDD1;
  --pcob-purple-8:  #E0D4E1;
  --pcob-purple-9:  #EFE9EF; /* lightest */

/* === Boundless Pink Scale === */
--pcob-pink--9: #150009; /* darkest */
--pcob-pink--8: #290012;
--pcob-pink--7: #3E001A;
--pcob-pink--6: #520023;
--pcob-pink--5: #67002C;
--pcob-pink--4: #7C0035;
--pcob-pink--3: #90003E;
--pcob-pink--2: #A50046;
--pcob-pink--1: #B9004F;
--pcob-pink-0:  #CE0058; /* VT Boundless Pink (PMS Rubine Red) */
--pcob-pink-1:  #D31A69;
--pcob-pink-2:  #D83379;
--pcob-pink-3:  #DD4D8A;
--pcob-pink-4:  #E2669B;
--pcob-pink-5:  #E780AC;
--pcob-pink-6:  #EB99BC;
--pcob-pink-7:  #F0B3CD;
--pcob-pink-8:  #F5CCDE;
--pcob-pink-9:  #FAE6EE; /* lightest */

/* === Triumphant Yellow Scale === */
--pcob-yellow--9: #191707; /* darkest */
--pcob-yellow--8: #312F0E;
--pcob-yellow--7: #4A4616;
--pcob-yellow--6: #635E1D;
--pcob-yellow--5: #7C7524;
--pcob-yellow--4: #948C2B;
--pcob-yellow--3: #ADA432;
--pcob-yellow--2: #C6BB3A;
--pcob-yellow--1: #DED341;
--pcob-yellow-0:  #F7EA48; /* VT Triumphant Yellow (PMS 101C) */
--pcob-yellow-1:  #F8EC5B;
--pcob-yellow-2:  #F9EE6D;
--pcob-yellow-3:  #F9F07F;
--pcob-yellow-4:  #FAF291;
--pcob-yellow-5:  #FBF4A3;
--pcob-yellow-6:  #FCF7B6;
--pcob-yellow-7:  #FDF9C8;
--pcob-yellow-8:  #FDFBDA;
--pcob-yellow-9:  #FEFDEC; /* lightest */

/* === Sustainable Teal Scale === */
--pcob-teal--9: #080D0E; /* darkest */
--pcob-teal--8: #101B1D;
--pcob-teal--7: #18282B;
--pcob-teal--6: #20353A;
--pcob-teal--5: #284348;
--pcob-teal--4: #305056;
--pcob-teal--3: #385D65;
--pcob-teal--2: #406A73;
--pcob-teal--1: #487882;
--pcob-teal-0:  #508590; /* VT Sustainable Teal (PMS 2212C) */
--pcob-teal-1:  #62919B;
--pcob-teal-2:  #739DA6;
--pcob-teal-3:  #85AAB2;
--pcob-teal-4:  #96B6BC;
--pcob-teal-5:  #A7C2C7;
--pcob-teal-6:  #B9CED3;
--pcob-teal-7:  #CADADD;
--pcob-teal-8:  #DCE7E9;
--pcob-teal-9:  #EDF3F4; /* lightest */

/* === Vibrant Turquoise Scale === */
--pcob-turquoise--9: #041514; /* darkest */
--pcob-turquoise--8: #092B27;
--pcob-turquoise--7: #0D403B;
--pcob-turquoise--6: #12554E;
--pcob-turquoise--5: #166B62;
--pcob-turquoise--4: #1A8076;
--pcob-turquoise--3: #1F9589;
--pcob-turquoise--2: #23AA9D;
--pcob-turquoise--1: #28C0B0;
--pcob-turquoise-0:  #2CD5C4; /* VT Vibrant Turquoise (PMS 3255C) */
--pcob-turquoise-1:  #42D9CA;
--pcob-turquoise-2:  #56DDD0;
--pcob-turquoise-3:  #6CE2D6;
--pcob-turquoise-4:  #80E6DC;
--pcob-turquoise-5:  #95EAE1;
--pcob-turquoise-6:  #ABEEE7;
--pcob-turquoise-7:  #BFF2ED;
--pcob-turquoise-8:  #D5F7F3;
--pcob-turquoise-9:  #E9FBF9; /* lightest */

/* === Land-Grant Grey Scale === */
--pcob-grey--9: #151514; /* darkest */
--pcob-grey--8: #2B2A29;
--pcob-grey--7: #403F3D;
--pcob-grey--6: #565451;
--pcob-grey--5: #6C6966;
--pcob-grey--4: #817E7A;
--pcob-grey--3: #97938E;
--pcob-grey--2: #ACA8A2;
--pcob-grey--1: #C2BDB7;
--pcob-grey-0:  #D7D2CB; /* VT Land-Grant Grey (PMS Warm Gray 1C) */
--pcob-grey-1:  #DBD7D0;
--pcob-grey-2:  #DFDBD5;
--pcob-grey-3:  #E3E0DB;
--pcob-grey-4:  #E7E4E0;
--pcob-grey-5:  #EBE8E5;
--pcob-grey-6:  #EFEDEA;
--pcob-grey-7:  #F3F1EF;
--pcob-grey-8:  #F7F6F5;
--pcob-grey-9:  #FBFAFA; /* lightest */

/* === Hokie Stone Scale === */
--pcob-stone--9: #0C0C0C; /* darkest */
--pcob-stone--8: #171819;
--pcob-stone--7: #232425;
--pcob-stone--6: #2F3031;
--pcob-stone--5: #3B3C3E;
--pcob-stone--4: #46484A;
--pcob-stone--3: #525456;
--pcob-stone--2: #5E6062;
--pcob-stone--1: #696C6F;
--pcob-stone-0:  #75787B; /* VT Hokie Stone (PMS Cool Gray 9C) */
--pcob-stone-1:  #838688;
--pcob-stone-2:  #919395;
--pcob-stone-3:  #9FA1A3;
--pcob-stone-4:  #ACAEB0;
--pcob-stone-5:  #BABBBD;
--pcob-stone-6:  #C8C9CA;
--pcob-stone-7:  #D5D6D7;
--pcob-stone-8:  #E3E4E5;
--pcob-stone-9:  #F1F1F2; /* lightest */

/* === Yardline White Scale === */
--pcob-white--9: #191919; /* darkest */
--pcob-white--8: #333333;
--pcob-white--7: #4C4C4C;
--pcob-white--6: #666666;
--pcob-white--5: #808080;
--pcob-white--4: #999999;
--pcob-white--3: #B3B3B3;
--pcob-white--2: #CCCCCC;
--pcob-white--1: #E6E6E6;
--pcob-white-0:  #FFFFFF; /* VT Yardline White (PMS White) */

/* === Skipper Smoke Scale === */
--pcob-smoke--9: #0A040A; /* darkest */
--pcob-smoke--8: #140815;
--pcob-smoke--7: #1E0B1F;
--pcob-smoke--6: #280F29;
--pcob-smoke--5: #321334;
--pcob-smoke--4: #3C173E;
--pcob-smoke--3: #461B48;
--pcob-smoke--2: #501E52;
--pcob-smoke--1: #CECBCF;
--pcob-smoke-0:  #E5E1E6; /* VT Skipper Smoke (PMS 663C) */

/* ========= #endregion  END BRAND COLOR VARIABLES    ========= */
}

/* #region =========    BRAND COLOR CLASSES    ========= */
/* Color Order: Black, Grey, Stone, Maroon, Orange, Burnt, Teal, Turquoise, Purple, Pink, Yellow */

/* === Black ======================================================= */
.pcob-black {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
  --btn-bg: var(--black);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-white--9);
  --btn-shadow: 0 4px 10px var(--pcob-white--9);
  --btn-outline: var(--black);
  --btn-bg-flip: var(--pcob-stone-8);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-default { /* fallback */
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
  --btn-bg: var(--black);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-white--9);
  --btn-shadow: 0 4px 10px var(--pcob-white--9);
  --btn-outline: var(--black);
  --btn-bg-flip: var(--pcob-stone-8);
  --btn-fg-flip: var(--btn-bg);
}

/* === Grey ======================================================== */
.pcob-dark-grey,
.pcob-dark-gray {
  background-color: var(--pcob-grey--7);
  color: var(--white);
  border-color: var(--black);
  --btn-bg: var(--pcob-grey--7);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-grey--9);
  --btn-shadow: 0 4px 10px var(--pcob-grey--7);
  --btn-outline: var(--pcob-grey--9);
  --btn-bg-flip: var(--pcob-grey-6);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-grey,
.pcob-gray {
  background-color: var(--pcob-grey);
  color: var(--black);
  border-color: var(--pcob-grey-darker);
  --btn-bg: var(--pcob-grey--1);
  --btn-fg: var(--black);
  --btn-bg-hover: var(--pcob-grey--3);
  --btn-shadow: 0 4px 10px var(--pcob-grey--3);
  --btn-outline: var(--pcob-grey--5);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--pcob-grey-9);
}

.pcob-light-grey,
.pcob-light-gray {
  background-color: var(--pcob-grey-lighter);
  color: var(--black);
  border-color: var(--pcob-grey-light);
  --btn-bg: var(--pcob-grey-5);
  --btn-fg: var(--black);
  --btn-bg-hover: var(--pcob-grey-2);
  --btn-shadow: 0 4px 10px var(--pcob-grey-2);
  --btn-outline: var(--pcob-grey--5);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--pcob-grey-9);
}

/* === Stone ======================================================= */
.pcob-dark-stone {
  background-color: var(--pcob-stone-darker);
  color: var(--white);
  border-color: var(--black);
  --btn-bg: var(--pcob-stone--5);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-stone--7);
  --btn-shadow: 0 4px 10px var(--pcob-stone--7);
  --btn-outline: var(--pcob-stone--7);
  --btn-bg-flip: var(--pcob-stone-9);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-stone {
  background-color: var(--pcob-stone-dark);
  color: var(--white);
  border-color: var(--black);
  --btn-bg: var(--pcob-stone-dark);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-stone-darker);
  --btn-shadow: 0 4px 10px var(--pcob-stone);
  --btn-outline: var(--pcob-stone-dark);
  --btn-bg-flip: var(--pcob-stone-9);
  --btn-fg-flip: var(--pcob-stone--5);
}

.pcob-light-stone {
  background-color: var(--pcob-stone-lighter);
  color: var(--black);
  border-color: var(--pcob-stone);
  --btn-bg: var(--pcob-stone-6);
  --btn-fg: var(--black);
  --btn-bg-hover: var(--pcob-stone-4);
  --btn-shadow: 0 4px 10px var(--pcob-stone-4);
  --btn-outline: var(--pcob-stone);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--pcob-stone-8);
}

/* === Maroon ====================================================== */
.pcob-dark-maroon {
  background-color: var(--pcob-maroon-darker);
  color: var(--white);
  border-color: var(--pcob-maroon-darker);
  --btn-bg: var(--pcob-maroon--5);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-maroon--7);
  --btn-shadow: 0 4px 10px var(--pcob-maroon--7);
  --btn-outline: var(--pcob-maroon--7);
  --btn-bg-flip: var(--pcob-maroon-9);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-maroon {
  background-color: var(--pcob-maroon);
  color: var(--white);
  border-color: var(--pcob-maroon-darker);
  --btn-bg: var(--pcob-maroon);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-maroon--2);
  --btn-shadow: 0 4px 10px var(--pcob-maroon--2);
  --btn-outline: var(--pcob-maroon-2);
  --btn-bg-flip: var(--pcob-maroon-9);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-light-maroon {
  background-color: var(--pcob-maroon-lightest);
  color: var(--pcob-maroon-dark);
  border-color: var(--pcob-maroon-darker);
  --btn-bg: var(--pcob-maroon-9);
  --btn-fg: var(--pcob-maroon-dark);
  --btn-bg-hover: var(--pcob-maroon-7);
  --btn-shadow: 0 4px 10px var(--pcob-maroon-7);
  --btn-outline: var(--pcob-maroon);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

/* === Orange ====================================================== */
.pcob-dark-orange {
  background-color: var(--pcob-orange-darker);
  color: var(--white);
  border-color: var(--pcob-orange-darker);
  --btn-bg: var(--pcob-orange--5);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-orange--7);
  --btn-shadow: 0 4px 10px var(--pcob-orange--7);
  --btn-outline: var(--pcob-orange--5);
  --btn-bg-flip: var(--pcob-orange-8);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-orange {
  background-color: var(--pcob-orange);
  color: var(--white);
  border-color: var(--pcob-orange-darker);
  --btn-bg: var(--pcob-orange);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-orange--2);
  --btn-shadow: 0 4px 10px var(--pcob-orange--2);
  --btn-outline: var(--pcob-orange--2);
  --btn-bg-flip: var(--pcob-orange-8);
  --btn-fg-flip: var(var(--pcob-orange--2));
}

.pcob-light-orange {
  background-color: var(--pcob-orange-lightest);
  color: var(--pcob-orange-dark);
  border-color: var(--pcob-orange-dark);
  --btn-bg: var(--pcob-orange-lightest);
  --btn-fg: var(--pcob-orange-dark);
  --btn-bg-hover: var(--pcob-orange-7);
  --btn-shadow: 0 4px 10px var(--pcob-orange-7);
  --btn-outline: var(--pcob-orange--2);
  --btn-bg-flip: var(--pcob-orange-1);
  --btn-fg-flip: var(--pcob-orange-9);
}

/* === Burnt ======================================================= */
.pcob-dark-burnt {
  background-color: var(--pcob-burnt-darker);
  color: var(--white);
  border-color: var(--pcob-burnt-darker);
  --btn-bg: var(--pcob-burnt-darker);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-burnt--7);
  --btn-shadow: 0 4px 10px var(--pcob-burnt--7);
  --btn-outline: var(--pcob-burnt--6);
  --btn-bg-flip: var(--pcob-burnt-9);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-burnt {
  background-color: var(--pcob-burnt-dark);
  color: var(--white);
  border-color: var(--pcob-burnt-darker);
  --btn-bg: var(--pcob-burnt-dark);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-burnt--4);
  --btn-shadow: 0 4px 10px var(--pcob-burnt--4);
  --btn-outline: var(--pcob-burnt--4);
  --btn-bg-flip: var(--pcob-burnt-9);
  --btn-fg-flip: var(--pcob-burnt--3);
}

.pcob-light-burnt {
  background-color: var(--pcob-burnt-lightest);
  color: var(--pcob-burnt-dark);
  border-color: var(--pcob-burnt-dark);
  --btn-bg: var(--pcob-burnt-lightest);
  --btn-fg: var(--pcob-burnt--3);
  --btn-bg-hover: var(--pcob-burnt-7);
  --btn-shadow: 0 4px 10px var(--pcob-burnt-7);
  --btn-outline: var(--pcob-burnt--3);
  --btn-bg-flip: var(--pcob-burnt--5);
  --btn-fg-flip: var(--btn-bg);
}

/* === Teal ======================================================== */
.pcob-dark-teal {
  background-color: var(--pcob-teal-darker);
  color: var(--white);
  border-color: var(--pcob-teal-darkest);
  --btn-bg: var(--pcob-teal-darker);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-teal--7);
  --btn-shadow: 0 4px 10px var(--pcob-teal--7);
  --btn-outline: var(--pcob-teal--7);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-teal {
  background-color: var(--pcob-teal-dark);
  color: var(--white);
  border-color: var(--pcob-teal-darkest);
  --btn-bg: var(--pcob-teal-dark);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-teal--4);
  --btn-shadow: 0 4px 10px var(--pcob-teal--4);
  --btn-outline: var(--pcob-teal--4);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-light-teal {
  background-color: var(--pcob-teal-lightest);
  color: var(--pcob-teal-darker);
  border-color: var(--pcob-teal-darker);
  --btn-bg: var(--pcob-teal-8);
  --btn-fg: var(--pcob-teal-darker);
  --btn-bg-hover: var(--pcob-teal-6);
  --btn-shadow: 0 4px 10px var(--pcob-teal-6);
  --btn-outline: var(--pcob-teal);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

/* === Turquoise =================================================== */
.pcob-dark-turquoise {
  background-color: var(--pcob-turquoise-darker);
  color: var(--white);
  border-color: var(--pcob-turquoise-darkest);
  --btn-bg: var(--pcob-turquoise-darker);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-turquoise--7);
  --btn-shadow: 0 4px 10px var(--pcob-turquoise--7);
  --btn-outline: var(--pcob-turquoise--7);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-turquoise {
  background-color: var(--pcob-turquoise);
  color: var(--black);
  border-color: var(--pcob-turquoise-darker);
  --btn-bg: var(--pcob-turquoise);
  --btn-fg: var(--black);
  --btn-bg-hover: var(--pcob-turquoise--2);
  --btn-shadow: 0 4px 10px var(--pcob-turquoise--2);
  --btn-outline: var(--pcob-turquoise--2);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-light-turquoise {
  background-color: var(--pcob-turquoise-lightest);
  color: var(--pcob-turquoise-darkest);
  border-color: var(--pcob-turquoise-darkest);
  --btn-bg: var(--pcob-turquoise-7);
  --btn-fg: var(--pcob-turquoise-darkest);
  --btn-bg-hover: var(--pcob-turquoise-5);
  --btn-shadow: 0 4px 10px var(--pcob-turquoise-5);
  --btn-outline: var(--pcob-turquoise--3);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

/* === Purple ====================================================== */
.pcob-dark-purple {
  background-color: var(--pcob-purple-darker);
  color: var(--white);
  border-color: var(--pcob-purple-darkest);
  --btn-bg: var(--pcob-purple-darker);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-purple--7);
  --btn-shadow: 0 4px 10px var(--pcob-purple--7);
  --btn-outline: var(--pcob-purple--7);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-purple {
  background-color: var(--pcob-purple);
  color: var(--white);
  border-color: var(--pcob-purple-darker);
  --btn-bg: var(--pcob-purple);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-purple--2);
  --btn-shadow: 0 4px 10px var(--pcob-purple--2);
  --btn-outline: var(--pcob-purple--2);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-light-purple {
  background-color: var(--pcob-purple-lightest);
  color: var(--pcob-purple-darker);
  border-color: var(--pcob-purple-darker);
  --btn-bg: var(--pcob-purple-lightest);
  --btn-fg: var(--pcob-purple-darker);
  --btn-bg-hover: var(--pcob-purple-7);
  --btn-shadow: 0 4px 10px var(--pcob-purple-7);
  --btn-outline: var(--pcob-purple);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

/* === Pink ======================================================== */
.pcob-dark-pink {
  background-color: var(--pcob-pink-darker);
  color: var(--white);
  border-color: var(--pcob-pink-darkest);
  --btn-bg: var(--pcob-pink-darker);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-pink--7);
  --btn-shadow: 0 4px 10px var(--pcob-pink--7);
  --btn-outline: var(--pcob-pink--7);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-pink {
  background-color: var(--pcob-pink);
  color: var(--white);
  border-color: var(--pcob-pink-darker);
  --btn-bg: var(--pcob-pink);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-pink--2);
  --btn-shadow: 0 4px 10px var(--pcob-pink--2);
  --btn-outline: var(--pcob-pink-2);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-light-pink {
  background-color: var(--pcob-pink-lightest);
  color: var(--pcob-pink-darker);
  border-color: var(--pcob-pink-darker);
  --btn-bg: var(--pcob-pink-lightest);
  --btn-fg: var(--pcob-pink-darker);
  --btn-bg-hover: var(--pcob-pink-7);
  --btn-shadow: 0 4px 10px var(--pcob-pink-7);
  --btn-outline: var(--pcob-pink);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

/* === Yellow ====================================================== */
.pcob-dark-yellow {
  background-color: var(--pcob-yellow-darker);
  color: var(--white);
  border-color: var(--pcob-yellow-darkest);
  --btn-bg: var(--pcob-yellow-darker);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--pcob-yellow--7);
  --btn-shadow: 0 4px 10px var(--pcob-yellow--7);
  --btn-outline: var(--pcob-yellow--7);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-yellow {
  background-color: var(--pcob-yellow);
  color: var(--black);
  border-color: var(--pcob-yellow-darker);
  --btn-bg: var(--pcob-yellow);
  --btn-fg: var(--black);
  --btn-bg-hover: var(--pcob-yellow--2);
  --btn-shadow: 0 4px 10px var(--pcob-yellow--2);
  --btn-outline: var(--pcob-yellow--4);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

.pcob-light-yellow {
  background-color: var(--pcob-yellow-lightest);
  color: var(--pcob-yellow-darkest);
  border-color: var(--pcob-yellow-darkest);
  --btn-bg: var(--pcob-yellow-7);
  --btn-fg: var(--pcob-yellow-darkest);
  --btn-bg-hover: var(--pcob-yellow-4);
  --btn-shadow: 0 4px 10px var(--pcob-yellow-4);
  --btn-outline: var(--pcob-yellow--4);
  --btn-bg-flip: var(--btn-fg);
  --btn-fg-flip: var(--btn-bg);
}

/* #endregion =========    END BRAND COLOR CLASSES    ========= */

/* #region =========    IN PROGRESS    ========= */

/* #region Image-Card Grid */

/* --- responsive 3-column grid --- */
.pcob-image-card-grid{
  display:grid;
  gap:3rem;
  grid-template-columns:repeat(3,1fr);
}

@media (max-width:1020px){
  .pcob-image-card-grid{
    grid-template-columns:1fr;   /* stacks vertically */
  }
}

/* --- individual card --- */
.pcob-image-card{
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 6px rgba(0,0,0,.05);
  border-radius:4px;
  background:#fff;
  overflow:hidden;               /* crop image */
  transition:color .25s ease;
}

/* top image (always fills) */
.pcob-image-card__img{
  width:100%;
  padding-top:66%;               /* 3:2 aspect placeholder */
  background-size:cover;
  background-position:center;
}

/* text wrapper */
.pcob-image-card__body{
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:#111;                    /* default text */
  transition:color .25s ease;
}

.pcob-image-card__title{
  font-family:"gineso-condensed","Gineso","Gineso LT",sans-serif;
  font-weight:700;
  font-size:1.25rem;
}

.pcob-image-card__text{
  font-family:"Crimson Text",Georgia,serif;
  font-size:1rem;
  line-height:1.6;
}

/* --- hover colour shift --- */
.pcob-image-card:hover .pcob-image-card__body{
  color:var(--pcob-maroon,#861F41);   /* falls back if CSS var missing */
}

/* #endregion Image-Card Grid */



/* === Font Family Utilities === */
.pcob-font-gineso {
  font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;    
}

.pcob-font-acherus {
  font-family: "Acherus", sans-serif;
}

.pcob-font-crimson {
  font-family: "Crimson Text", serif;
}

/* === Capitalization === */
.pcob-text-uppercase {
  text-transform: uppercase;
}

/* Optional: Add a class to reset back to normal case if needed */
.pcob-text-regular {
  text-transform: none;
}

.pcob-card {
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.pcob-card-image {
  width: 100%;
  height: auto;
  display: block;
}

.pcob-card-text {
  padding: 1rem;
}

.pcob-card-heading {
  margin-top: 0;
  font-size: 1.25rem;
}

.pcob-card-body {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* --- centre the card in the viewport --- */
.pcob-card-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* --- card tweaks --- */
.pcob-card{
  margin:0 auto;
  text-align:center;               /* centres text inside */
  transition:transform .35s ease, box-shadow .35s ease;
}
.pcob-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 30px rgba(0,0,0,.20);
}

/* --- bigger heading --- */
.pcob-card-heading{
  font-size:clamp(2rem,4vw,2.75rem);   /* was 1.25 rem :contentReference[oaicite:1]{index=1} */
}

/* --- B/W → colour image swap --- */
.pcob-card-image{
  filter:grayscale(100%);
  transition:filter .4s ease;
}
.pcob-card:hover .pcob-card-image{
  filter:none;   /* remove grayscale on hover */
}

/* --- make whole card the link; hide old button --- */
.pcob-card-link{                     /* new utility */
  display:block;
  text-decoration:none;
  color:inherit;
}
.pcob-card .pcob-button{display:none;}   /* button is no longer shown */
.pcob-card-link:focus-visible .pcob-card{
  outline:3px solid var(--pcob-maroon);
  outline-offset:4px;
}


.pcob-stat-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
}

.pcob-stat-number {
  font-size: 2rem;
  font-weight: bold;
}

.pcob-stat-label {
  font-size: 1rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.pcob-alumni-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

.pcob-alumni-story {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: end;
}

.pcob-alumni-overlay {
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 1rem;
  width: 100%;
}

.pcob-alumni-overlay h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
}

.pcob-alumni-overlay p {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* #region Image Card Animated Testing */

.pcob-image-card-animated {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 400px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 2px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.pcob-image-card-animated__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  will-change: transform;
  z-index: 0;
}

.pcob-image-card-animated:hover .pcob-image-card-animated__bg {
  transform: scale(1.05);
}

.pcob-image-card-animated__content {
  position: relative;
  z-index: 1;
  padding: 3rem;
  max-width: 50%;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.pcob-image-card-animated__heading {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.pcob-image-card-animated__body {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* #endregion Image Card Animated Testing */

/* #region PCOB Buttons =============================================================
   PCOB BUTTON SYSTEM • Refactor 2025‑06‑07
   -------------------------------------------------------------
   • One base component + tiny utility classes
   • Colour, hover, outline & shadow are handled with CSS vars
   • No monster :not() selector or duplicate rules
   ============================================================= */

/* 1. BASE COMPONENT ------------------------------------------------- */
.pcob-button {
  display: inline-block;
  font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  margin: 0 1rem 1rem 0;
  min-width: 44px;
  min-height: 44px;

  /* use the vars */
  background-color: var(--btn-bg);
  color: var(--btn-fg);
}

.pcob-button:hover,
.pcob-button:active {
  background-color: var(--btn-bg-hover);
  box-shadow: var(--btn-shadow);
  color: var(--btn-fg);
}

.pcob-button:visited {
  color: var(--btn-fg);
}

.pcob-button:focus-visible {
  outline: 3px solid var(--btn-outline);
  outline-offset: 3px;
}

.pcob-button,
.pcob-button:visited,
.pcob-button:hover,
.pcob-button:active,
.pcob-button:focus-visible {
  text-decoration: none;
}

/* 2. SIZE MODIFIERS ------------------------------------------------- */
.pcob-button--sm { font-size: 1.05rem; padding: 0.6rem 1.2rem; }
.pcob-button--md { font-size: 1.2rem;  padding: 0.9rem 1.8rem; }
.pcob-button--lg { font-size: 1.5rem;  padding: 1rem 2rem; min-width: 200px; }

/* 3. FLIP HOVER MODIFIER -------------------------------------------- */
.pcob-button.pcob-button-flip:hover,
.pcob-button.pcob-button-flip:active {
  background-color: var(--btn-bg-flip);
  color: var(--btn-fg-flip);
  box-shadow: none;
}

/* 4. HERO VARIANT --------------------------------------------------- */
.pcob-button--hero {
  --btn-bg: #CA4F00; /* directly override for hero */
  --btn-fg: #fff;
  --btn-bg-hover: #861F41;
  font-size: clamp(1.2rem, 3vw, 8rem);
  padding: 20px 48px;
  border-radius: 0;
}

.pcob-hero-button-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  margin: 2rem auto 0 auto;
  padding: 0 1rem;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow-x: auto;
}

@media (min-width:1020px) {
  .pcob-button--hero { min-width:260px; padding:20px 120px; font-size:2.25rem; }
  
  .pcob-hero-button-group {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
}
  
@media (max-width:545px) {
  .pcob-button--hero { width:100%; text-align:center; padding:0.7em 1.25em; font-size:1.25em; }

  .pcob-hero-button-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 75%;
  margin: 0 auto;
  padding-top: 1em;
  padding-bottom: 1em;
  }
}

/* 5. SWIPE HOVER MODIFIER -------------------------------------------- */
.pcob-button.pcob-button-swipe {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ensures mix-blend works cleanly if used */
  z-index: 0;
}

.pcob-button.pcob-button-swipe::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--btn-bg-flip);
  transition: transform 0.3s ease;
  z-index: -1;
}

.pcob-button.pcob-button-swipe:hover::before,
.pcob-button.pcob-button-swipe:active::before {
  transform: translateX(100%);
}

.pcob-button.pcob-button-swipe:hover,
.pcob-button.pcob-button-swipe:active {
  color: var(--btn-fg-flip);
  box-shadow: none;
}



/* #endregion =========    END IN PROGRESS    ========= */

/* #region =========    TESTED    ========= */

/* #region === CSS Test Box === */

  .pcob-test-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
  }

  .pcob-test-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .pcob-test-box {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: 4px solid;
    border-radius: 6px;
    min-width: 120px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  /* #endregion === End CSS Test Box === */

/* #region === Warning Stripes === */

.pcob-warning-stripes {
  background: repeating-linear-gradient(
    45deg,
var(--pcob-yellow-0),       
var(--pcob-yellow-0) 20px,
var(--black) 20px,
var(--black) 40px
  );
  height: 40px;
  width: 100%;
}

/* #endregion === End Warning Strips === */

/* #region === Feature Bar === */
.pcob-feature-bar {
  display: flex;
  justify-content: center;
  gap: 3rem;                     /* ↔ spacing between columns          */
  padding: 3rem 1rem;
  text-align: center;
  flex-wrap: wrap;
  font-family: "Crimson Text", Georgia, serif;
  border-top: 1px solid;
  border-bottom: 1px solid;
  box-sizing: border-box;
}

.pcob-feature {
  max-width: 300px;
  padding: 0 1rem;
  position: relative;            /* ⟵ needed for the ::after divider   */
}

/* ── Auto-draw column divider ────────────────────────────────────────── */
.pcob-feature:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1.5rem;                /* half of the 3rem gap               */
  width: 1px;
  background-color: currentColor;
  opacity: 0.4;
}

/* Titles and Subtitles */
.pcob-feature-title {
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

.pcob-feature-subtitle {
  font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* === Responsive Tweaks === */
@media screen and (min-width: 768px) {
  .pcob-feature-title   { font-size: 2rem; }
  .pcob-feature-subtitle{ font-size: 1.1rem; }
}

@media screen and (min-width: 1200px) {
  .pcob-feature-bar {
    gap: 7rem;                  /* wider gap on XL screens            */
    padding: 5rem 2rem;
  }
  .pcob-feature:not(:last-of-type)::after {
    right: -3.5rem;             /* half of the 7rem gap               */
  }
  .pcob-feature-title   { font-size: 2.6rem; }
  .pcob-feature-subtitle{ font-size: 1.3rem; }
}

@media screen and (max-width: 999px) {
  .pcob-feature-bar {
    flex-direction: column;
    align-items: center;
  }
  .pcob-feature {
    max-width: 100%;
    width: 100%;
    padding: 1.5rem 0;
  }

  /* Horizontal divider for stacked layout */
  .pcob-feature:not(:last-of-type)::after {
    top: auto;
    bottom: -0.75rem;           /* spacing below each feature         */
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 1px;
  }
}
/* #endregion === Feature Bar === */

/* #region ======= Pamplin Band Styles  (v-layout/behavior split) ======= */

/* ------------------------------------------------------------------ */
/* 1)  Base wrapper – shared rules for *all* image-band variants       */
/* ------------------------------------------------------------------ */
.pcob-image-band{
  display:flex;
  flex-wrap:nowrap;
  padding:0;
  min-height:400px;
  box-sizing:border-box;
  width:100%;
}

/* ------------------------------------------------------------------ */
/* 2)  ──  LAYOUT modifiers  (text : image ratio + flow direction)     */
/* ------------------------------------------------------------------ */

/* 3 : 1 — text left, image right  (default row)  */
.pcob-band-layout-3-1{ flex-direction:row; }
.pcob-band-layout-3-1 .pcob-band-text       { flex:3; }
.pcob-band-layout-3-1 .pcob-band-image-bg   { flex:1.5; }

/* 1 : 3 — text right, image left (row-reverse) */
.pcob-band-layout-1-3{ flex-direction:row-reverse; }
.pcob-band-layout-1-3 .pcob-band-text       { flex:3; }
.pcob-band-layout-1-3 .pcob-band-image-bg   { flex:1.5; }

/* 2 : 1 — text left, image right */
.pcob-band-layout-2-1{ flex-direction:row; }
.pcob-band-layout-2-1 .pcob-band-text,
.pcob-band-layout-2-1 .pcob-band-image-bg   { flex:2; }

/* 1 : 2 — text right, image left */
.pcob-band-layout-1-2{ flex-direction:row-reverse; }
.pcob-band-layout-1-2 .pcob-band-text,
.pcob-band-layout-1-2 .pcob-band-image-bg   { flex:2; }

/* ------------------------------------------------------------------ */
/* 3)  ──  IMAGE-BEHAVIOR modifiers (mobile stacking vs. hiding)       */
/* ------------------------------------------------------------------ */

/*    a) Stacking – image becomes full-width banner above text         */
@media (max-width:768px){
  .pcob-band-behavior-stacking{
    flex-direction:column;
  }
  .pcob-band-behavior-stacking .pcob-band-image-bg{
    display:block;
    order:-1;
    width:100%;
    height:300px;          /* tweak as needed */
    flex:none;
  }
}

/*    b) Hiding – image disappears on mobile, text full-width          */
@media (max-width:768px){
  .pcob-band-behavior-hiding{
    flex-direction:column;
  }
  .pcob-band-behavior-hiding .pcob-band-image-bg{
    display:none;
  }
}

/* ------------------------------------------------------------------ */
/* 4)  Text-alignment helpers (unchanged)                              */
/* ------------------------------------------------------------------ */
.pcob-text-band-left,
.pcob-text-band-center,
.pcob-text-band-right{
  display:flex;
  box-sizing:border-box;
  width:100%;
}

.pcob-text-band-left  { justify-content:flex-start; text-align:left;  }
.pcob-text-band-center{ justify-content:center;     text-align:center;}
.pcob-text-band-right { justify-content:flex-end;   text-align:right; }

.pcob-text-band-left  .pcob-band-text{ align-items:flex-start; text-align:left;   }
.pcob-text-band-center.pcob-band-text{ align-items:center;     text-align:center; }
.pcob-text-band-right .pcob-band-text{ align-items:flex-end;   text-align:right;  }

/* ------------------------------------------------------------------ */
/* 5)  Inner text/btn/image rules (copied intact from your original)   */
/* ------------------------------------------------------------------ */
.pcob-band-text{
  flex:3;
  padding:4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:100%;
}

.pcob-band-text>div{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-start;
}

.pcob-band-text a.pcob-button{ margin:0; }

.pcob-band-image-bg{
  flex:1.5;
  min-width:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height:auto;
}

.pcob-band-heading{
  font-style:italic; font-weight:600;
  font-size:clamp(2.5rem,4vw,3rem);
  line-height:1.2; margin-bottom:1.2rem; color:inherit;
}

.pcob-band-body{
  font-size:clamp(1rem,2vw,1.25rem); line-height:1.7;
  margin-bottom:2rem; color:inherit;
}

/* Centered overrides for mobile text blocks */
@media (max-width:768px){
  .pcob-band-text,
  .pcob-text-band-left .pcob-band-text,
  .pcob-text-band-center .pcob-band-text,
  .pcob-text-band-right .pcob-band-text{
    padding:2rem; text-align:center; align-items:center;
  }
  .pcob-band-text>div{ justify-content:center; }
  .pcob-band-text a.pcob-button{ width:auto; display:inline-block; }
}

/* #endregion ===== End Pamplin Band Styles ===== */

/* #endregion =========    END TESTED    ========= */





/* ======================== PCOB Image Arrow Button ======================== */

.pcob-button-img-arrow-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.pcob-button-img-arrow {
  display: block;
  max-width: 400px;
  width: 100%;
  text-decoration: none;
}

.pcob-button-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 300px;
  overflow: hidden;
}

.pcob-button-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pcob-button-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

.pcob-button-img-arrow:hover .pcob-button-img-overlay {
  background: rgba(134, 31, 65, 0.65);
}

.pcob-button-img-text {
  position: relative;
  color: white;
  font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.1;
  display: inline-block;
  text-align: center;
  padding: 0 1rem;
  max-width: 100%;
  z-index: 1;
}

.pcob-button-img-text::before,
.pcob-button-img-text::after {
  content: "";
  position: absolute;
  top: 50%;
  transform-origin: right center;
  opacity: 0;
  transition: transform 0.4s ease, right 0.4s ease, opacity 0.4s ease;
  z-index: 3;
  pointer-events: none;
}

.pcob-button-img-text::before {
  right: 0;
  width: 2.8rem;
  height: 6px;
  background-color: #CA4F00;
  transform: rotate(-45deg) translate(1rem, -50%);
}

.pcob-button-img-text::after {
  right: 0;
  width: 2.8rem;
  height: 6px;
  background-color: #CA4F00;
  transform: rotate(45deg) translate(1rem, 50%);
}

.pcob-button-img-arrow:hover .pcob-button-img-text::before,
.pcob-button-img-arrow:hover .pcob-button-img-text::after {
  opacity: 1;
  right: -0.25rem;
}

.pcob-button-img-arrow:hover .pcob-button-img-text::before {
  transform: rotate(-45deg) translate(0, -50%);
}

.pcob-button-img-arrow:hover .pcob-button-img-text::after {
  transform: rotate(45deg) translate(0, 50%);
}

@media screen and (max-width: 767px) {
  .pcob-button-img-arrow-wrapper {
    justify-content: center;
  }

  .pcob-button-img-arrow {
    max-width: 100%;
    width: 100%;
  }

  .pcob-button-img-container {
    aspect-ratio: 4 / 3;
    max-height: 160px;
  }

  .pcob-button-img-text {
    font-size: clamp(1.2rem, 5vw, 2rem);
    padding: 0 1rem;
  }

  .pcob-button-img-text::before,
  .pcob-button-img-text::after {
    width: 1.4rem;
    height: 5px;
    right: 0;
  }

  .pcob-button-img-text::before {
    transform: rotate(-45deg) translate(0.75rem, -50%);
  }

  .pcob-button-img-text::after {
    transform: rotate(45deg) translate(0.75rem, 50%);
  }

  .pcob-button-img-arrow:hover .pcob-button-img-text::before,
  .pcob-button-img-arrow:hover .pcob-button-img-text::after {
    right: -0.25rem;
  }

  .pcob-button-img-arrow:hover .pcob-button-img-text::before {
    transform: rotate(-45deg) translate(0, -50%);
  }

  .pcob-button-img-arrow:hover .pcob-button-img-text::after {
    transform: rotate(45deg) translate(0, 50%);
  }
}












/* ============================== OLD CODE ======================= */






/* ============================== OLDER CODE ======================= */

/* TESTING */

/* IMAGE BUTTON WITH ANIMATED ARROW */

.vt-img-button-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.vt-img-button {
  display: block;
  max-width: 400px;
  width: 100%;
  text-decoration: none;
}

.vt-img-square {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 300px;
  overflow: hidden;
}

.vt-img-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vt-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

.vt-img-button:hover .vt-img-overlay {
  background: rgba(134, 31, 65, 0.65); /* dark maroon */
}

.vt-img-text {
  position: relative;
  color: white;
  font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.1;
  display: inline-block;
  overflow: hidden;
  padding-right: 3rem; /* space for arrow */
  z-index: 2;
}

/* Hidden angled lines initially */
.vt-img-text::before,
.vt-img-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 3.2rem;
  height: 8px;
  background-color: #CA4F00;
  transform-origin: right center;
  opacity: 0;
  transition: transform 0.4s ease, right 0.4s ease, opacity 0.4s ease;
  z-index: 3;
  pointer-events: none;
}

.vt-img-text::before {
  transform: rotate(-45deg) translate(1rem, -50%);
}

.vt-img-text::after {
  transform: rotate(45deg) translate(1rem, 50%);
}

/* On hover: move them left to reveal */
.vt-img-button:hover .vt-img-text::before,
.vt-img-button:hover .vt-img-text::after {
  opacity: 1;
  right: 0.5rem;
}

.vt-img-button:hover .vt-img-text::before {
  transform: rotate(-45deg) translate(0, -50%);
}

.vt-img-button:hover .vt-img-text::after {
  transform: rotate(45deg) translate(0, 50%);
}






/* VIDEO HERO */

/* Base styles */
.vt-bgVid {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center;
}

    .vt-vidPlayPause {
    position: absolute;
    display: block;
    background-image: url(https://www.assets.cms.vt.edu/images/media-pause.svg);
    background: 0 0;
    border: none;
    width: 48px;
    height: 48px;
    left: 5%;
    top: auto;
    bottom: 30px;
    padding: 0;
    z-index: 99;
}

.vt-vid-overlay-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  padding: 0;
  background: rgba(0, 0, 0, 0.6);
}

.vt-vid-overlay-column.invisible {
  visibility: visible !important;
}

.vt-vid-overlay {
  text-align: center;
}

.vt-vid-header,
.vt-vid-subhead,
.vt-vid-call {
  display: block;
  position: relative;
  text-align: center;
  line-height: 1;
}

.vt-vid-header {
  font-family: "Acherus" !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: clamp(0.75rem, 3.2vw, 4rem) !important;
}

.vt-vid-header span {
  font-family: gineso-condensed, sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(2rem, 6vw, 7rem);
  padding: unset;
}

.vt-vid-header span span {
  font-weight: 700;
}

.vt-vid-subhead {
  font-family: 'Montserrat';
  font-weight: normal !important;
  letter-spacing: .02em;
  width: 75%;
  margin: 30px 0 0 0 !important;
}

.vt-vid-header-year {
  color: #fff;
  font-size: 14vw;
  font-weight: 100;
  line-height: 0.7em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: none;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #fff;
}

/* Media Queries */

@media screen and (min-width: 1024px) {
  .vt-bgVid {
    height: 65vh;
    max-height: 65vh;
    margin: 0 auto;
  }

  .vt-hero-wrapper {
    height: 75vh;
    max-height: 75vh;
    overflow: hidden;
  }

  .norightcol .vt-vidHeader,
  .vt-vidHeader {
    max-height: 75vh;
    overflow: hidden;
  }
}

@media screen and (min-width: 768px) {
  .vt-vid-header {
    font-size: 5.6vw;
    font-weight: 300;
    margin: 0;
  }

  .vt-vid-subhead {
    font-size: 1.5vw;
    font-weight: 600;
    margin: 0;
  }

  .norightcol .vt-vidHeader {
    max-height: 100vh;
  }
}

@media screen and (max-width: 767px) {
  .vt-hero-wrapper {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  .vt-bgVid {
    margin: 0;
  }

  .vt-vid-overlay-column {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .vt-vid-header {
    font-size: 3.2em;
    font-weight: 500 !important;
  }

  .vt-vid-subhead {
    font-size: 1.2em;
    font-weight: 400;
    margin-top: 20px;
  }

  .norightcol .vt-vidHeader {
    max-height: 100vh;
  }
}

/* MBA BUTTONS */

.vt-mba-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  margin: 2rem auto 0 auto;
  padding: 0 1rem;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.vt-mba-button {
  background-color: #CA4F00;
  color: white;
  font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 3vw, 8rem);
  text-decoration: none;
  padding: 20px 48px;
  min-width: 200px;
  text-align: center;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  display: inline-block;
  flex: 0 0 auto;
}

.vt-mba-button:hover {
  background-color: #861F41;
  color: white;
  text-decoration: none;
}

@media screen and (min-width: 1020px) {
  .vt-mba-buttons {
    flex-wrap: wrap; /* allow buttons to grow and move to next row if needed */
    overflow-x: visible; /* remove horizontal scroll */
    justify-content: center;
  }

  .vt-mba-button {
    min-width: 260px;
    padding: 20px 120px;
    font-size: 2.25rem;
  }
}


/* FEATURE BAR */


.vt-feature-bar {
  background-color: #431021;
  color: white;
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 1rem;
  text-align: center;
  flex-wrap: wrap;
  font-family: "Crimson Text", Georgia, serif;
  border-top: 1px solid #861f41;
  border-bottom: 1px solid #861f41;
  box-sizing: border-box;
}

.vt-feature {
  max-width: 300px;
  padding: 0 1rem;
  position: relative;
}

.vt-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  top: 20%;
  height: 60%;
  width: 2px;
  background-color: white;
  opacity: 0.5;
}

.vt-feature-title {
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

.vt-feature-subtitle {
  font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* Tablet scaling */
@media screen and (min-width: 768px) {
  .vt-feature-title {
    font-size: 2rem;
  }

  .vt-feature-subtitle {
    font-size: 1.1rem;
  }
}

/* BIG Desktop scaling */
@media screen and (min-width: 1200px) {
  .vt-feature-bar {
    gap: 7rem;
    padding: 5rem 2rem;
  }

  .vt-feature-title {
    font-size: 2.6rem;
  }

  .vt-feature-subtitle {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 545px) {
  .vt-mba-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 75%;
    margin: 0 auto;
    padding-top: 1em;
   padding-bottom: 1em;
  }

  .vt-mba-buttons a {
    width: 100%;
    text-align: center;
    padding: 0.7em 1.25em;
    font-size: 1.25em;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 480px) {
.vt-vid-overlay-column {
  padding-top: 2rem;
}

    .vt-vidPlayPause {
    width: 40px;
    height: 40px;
    left: 2.5%;
    top: auto;
    bottom: 30px;
    padding: 0;
    z-index: 99;
}
}


/* TESTIMONIAL SECTION */


    .vt-testimonial-slider {
      padding: 4rem 1rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      font-family: "Crimson Text", Georgia, serif;
      max-width: 100%;
      touch-action: pan-y;
    }

    .vt-testimonial-track {
      display: flex;
      transition: transform 0.6s ease;
      width: 100%;
      touch-action: pan-y;
    }

    .vt-testimonial {
      min-width: 100%;
      box-sizing: border-box;
      padding: 0 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .vt-testimonial-photo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 1rem;
    }

    .vt-testimonial blockquote {
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.5;
      margin: 0 auto 1.5rem;
      max-width: 700px;
      color: #1e1e2f;
      background: none !important;
      border-left: none !important;
      quotes: none;
    }

    .vt-testimonial-divider {
      width: 40px;
      border: 1px solid #CA4F00;
      margin: 1.5rem auto;
    }

    .vt-testimonial-name {
      font-weight: 700;
      font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
      font-size: 1.5rem;
      margin-bottom: 0.25rem;
      color: #000000;
    }

    .vt-testimonial-role {
      font-family: "gineso-condensed","Gineso","Gineso LT",sans-serif;
      font-size: 1.35rem;
      color: #555;
    }

    .vt-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-size: 2rem;
      cursor: pointer;
      color: #861F41;
      padding: 0 1rem;
      z-index: 3;
      transition: top 0.3s ease;
    }

    .vt-arrow.left {
      left: 1rem;
    }

    .vt-arrow.right {
      right: 1rem;
    }

    @media (max-width: 768px) {
      .vt-arrow {
        top: 60%;
      }
    }

    @media (max-width: 480px) {
      .vt-arrow {
        display: none;
      }
    }

    .vt-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 2rem;
    }

    .vt-dots button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
      background: #ddd;
      cursor: pointer;
    }

    .vt-dots button.active {
      background: #CA4F00;
    }


/* === KEEP THIS AS THE LAST LINK-COLOUR BLOCK =================== */
.pcob-button,
.pcob-button:link,
.pcob-button:visited,
.pcob-button:hover,
.pcob-button:active,
.pcob-button:focus-visible {
  color: var(--btn-fg);
}