/* ============================================
   Pratik Patel Profile — Plain CSS
   Converted from Tailwind utilities
   ============================================ */
   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700;800&family=Great+Vibes&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   :root {
     --slate-50: #f8fafc;
     --slate-100: #f1f5f9;
     --slate-200: #e2e8f0;
     --slate-300: #cbd5e1;
     --slate-400: #94a3b8;
     --slate-500: #64748b;
     --slate-600: #475569;
     --slate-700: #334155;
     --slate-800: #1e293b;
     --slate-900: #0f172a;
     --slate-950: #020617;
     --indigo-50: #eef2ff;
     --indigo-100: #e0e7ff;
     --indigo-200: #c7d2fe;
     --indigo-600: #0487FF;
     --indigo-800: #0487FF;
     --rose-50: #fff1f2;
     --rose-100: #ffe4e6;
     --rose-500: #f43f5e;
     --emerald-50: #ecfdf5;
     --emerald-600: #059669;
     --amber-300: #fcd34d;
     --linkedin: #0a66c2;
     --white: #ffffff;
     --shadow-hard: 4px 4px 0 0 rgba(15, 23, 42, 1);
     --shadow-hard-sm: 3px 3px 0 0 rgba(15, 23, 42, 1);
     --shadow-hard-xs: 1.5px 1.5px 0 0 rgba(15, 23, 42, 1);
     --shadow-hard-1: 1px 1px 0 0 #000;
     --shadow-indigo: 3px 3px 0 0 #0487FF;
     --radius-lg: 8px;
     --radius-xl: 12px;
     --radius-2xl: 16px;
     --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
     --font-display: "Outfit", sans-serif;
     --font-script: "Great Vibes", cursive;
     --font-parisienne: "Parisienne", cursive;
   }
   

   .page-id-38439  .wa__btn_popup, .page-id-38439 .scroll-to-top{ display: none !important; }
   
   html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   
   ::selection {
     background-color: var(--indigo-600);
     color: var(--white);
   }
   
   .executive-profile-container img {
     max-width: 100%;
     display: block;
   }
   
   .executive-profile-container a {
     color: inherit;
     text-decoration: none;
   }
   
   .executive-profile-container button {
     cursor: pointer;
   }
   
   /* ---------- Typography helpers ---------- */
   
   
   .parisienne-regular {
        font-family: "Parisienne", cursive;
        font-weight: 400;
        font-style: normal;
    }


   .icon {
     width: 20px;
     height: 20px;
     display: inline-block;
     flex-shrink: 0;
   }
   
   .icon-sm {
     width: 14px;
     height: 14px;
   }
   
   .icon-md {
     width: 16px;
     height: 16px;
   }
   
   .icon-lg {
     width: 20px;
     height: 20px;
   }
   
   
   /* ---------- Layout ---------- */
   
   .executive-profile-container.container {
     display: flex;
     flex-direction: column;
     gap: 44px;
     padding-block: 35px 45px;
     line-height: 1.5;
   }
   .executive-profile-container.container::before,
   .executive-profile-container.container::after { display: none; }
   
   /* ---------- Masthead ---------- */
   
   .masthead {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
     gap: 14px;
   }
   
   .masthead-left {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 24px;
     width: 100%;
   }
   
   .portrait-wrap {
     position: relative;
     flex-shrink: 0;
   }
   
   .portrait {
     width: 225px;
     height: 225px;
     object-fit: cover;
     object-position: center top;
     border-radius: var(--radius-2xl);
     border: 4px solid var(--slate-900);
     box-shadow: var(--shadow-hard);
     background-color: var(--slate-100);
     transition: box-shadow 0.2s ease;
   }
   
   .portrait:hover {
     box-shadow: 6px 6px 0 0 rgba(15, 23, 42, 1);
   }
   
   .portrait-badge {
     position: absolute;
     bottom: -8px;
     right: -8px;
     background-color: var(--white);
     color: var(--white);
     padding: 4px;
     border-radius: var(--radius-lg);
     border: 2px solid var(--slate-900);
     box-shadow: var(--shadow-hard-1);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
   }
   
   .masthead-info {
     display: flex;
     flex-direction: column;
     gap: 12px;
     text-align: center;
   }
   
   .masthead-title {
     font-size: 36px;
     font-weight: 800;
     letter-spacing: -0.025em;
     color: #0C1D3D;
     line-height: 1.2;
     font-family: "Montserrat", sans-serif;
   }
   
   .masthead-title .dot {
     color: var(--indigo-600);
   }
   
   .masthead-roles {
     font-size: 12px;
     color: var(--slate-500);
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     line-height: 1.625;
   }
   
   .social-header {
     display: flex;
     gap: 12px;
     flex-shrink: 0;
     align-self: flex-start;
     justify-content: center;
     width: 100%;
   }
   .social-header.footer-social-header { display: flex; }
   
   .social-btn {
     width: 38px;
     height: 38px;
     padding: 0;
     background-color: var(--white);
     border: 2px solid var(--slate-900);
     border-radius: 6px;
     box-shadow: 3px 3px 0 0 rgba(15, 23, 42, 1);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .social-btn:hover,
   .social-btn:focus {
     transform: translate(-2px, -2px);
     box-shadow: 5px 5px 0 0 rgba(15, 23, 42, 1);
   }
   
   .social-btn .icon {
     width: 18px;
     height: 18px;
   }

   /* Brand colors always on (default) — hover does not change color */
   .social-btn--facebook,
   .social-btn--facebook:hover,
   .social-btn--facebook:focus,
   .social-btn--facebook:visited {
     color: #1877f2 !important;
   }

   .social-btn--facebook .icon {
     width: 20px;
     height: 20px;
   }

   .social-btn--instagram,
   .social-btn--instagram:hover,
   .social-btn--instagram:focus,
   .social-btn--instagram:visited {
     color: #dd2a7b !important;
   }

   .social-btn--linkedin,
   .social-btn--linkedin:hover,
   .social-btn--linkedin:focus,
   .social-btn--linkedin:visited {
     color: #0a66c2 !important;
   }

   .social-btn--x,
   .social-btn--x:hover,
   .social-btn--x:focus,
   .social-btn--x:visited {
     color: #0f172a !important;
   }

   .social-btn--youtube,
   .social-btn--youtube:hover,
   .social-btn--youtube:focus,
   .social-btn--youtube:visited {
     color: #ff0000 !important;
   }
   
   /* ---------- Bento Grid ---------- */
   
   .bento-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
   }
   
   .card {
     background-color: var(--white);
     border: 2px solid var(--slate-900);
     box-shadow: var(--shadow-hard);
     border-radius: var(--radius-2xl);
     padding: 16px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   
   .card--full {
     grid-column: 1 / -1;
   }
   
   .card-body {
     display: flex;
     flex-direction: column;
     gap: 24px;
   }
   
   .card-header-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   .tag {
     display: inline-block;
     font-size: 12px;
     width: fit-content;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--white);
     letter-spacing: 0.1em;
     background-color: #3087ff;
     border: 2px solid var(--slate-900);
     padding: 4px 10px;
     border-radius: 4px;
     box-shadow: var(--shadow-hard-xs);
   }
   
   .tag--lg {
     padding: 4px 12px;
     box-shadow: 2px 2px 0 0 #0f172a;
   }
   
   /* Copy button */
   
   .copy-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 10px;
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 700;
     color: var(--slate-600);
     background-color: var(--slate-50);
     padding: 6px 12px;
     border-radius: var(--radius-lg);
     border: 2px solid var(--slate-900);
     box-shadow: var(--shadow-hard-xs);
     transition: all 0.2s ease;
   }
   
   .copy-btn:hover {
     color: var(--indigo-600);
     background-color: var(--indigo-50);
     transform: translate(-1px, -1px);
     box-shadow: 2.5px 2.5px 0 0 rgba(15, 23, 42, 1);
   }
   
   .copy-btn:active {
     transform: translate(1px, 1px);
     box-shadow: 1px 1px 0 0 rgba(15, 23, 42, 1);
   }
   
   .copy-btn.is-copied,
   .copy-btn.is-copied #copyBtnText {
     color: var(--emerald-600);
   }
   
   /* Bio block */
   
   .bio-box {
     background-color: rgba(238, 242, 255, 0.7);
     border: 2px solid var(--indigo-200);
     border-radius: var(--radius-xl);
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .bio-lead {
     color: var(--slate-900);
     font-size: 18px;
     font-weight: 800;
     line-height: 1.625;
   }
   
   .bio-divider {
     height: 2px;
     background-color: rgba(199, 210, 254, 0.6);
   }
   
   .bio-body {
     color: var(--slate-800);
     font-size: 16px;
     line-height: 1.625;
     font-weight: 400;
   }
   
   /* Quote / Creed */
   
   .creed-header {
     margin-bottom: 16px;
   }
   
   .creed-quote {
     font-family: var(--font-parisienne);
     font-size: 36px;
     color: #858484;
     line-height: 1.425;
     padding-top: 0px;
     margin-top: 0px;
     padding-bottom: 8px;
     margin-bottom: 8px;
     border-left: 0px;
     padding-inline: 0px;
   }
   
   .creed-footer {
     margin-top: 24px;
     padding-top: 16px;
     border-top: 2px solid var(--slate-100);
   }
   
   .creed-attribution {
     font-size: 12px;
     color: var(--slate-400);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 700;
   }
   
   /* Career milestones */
   
   .milestone-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   
   .milestone-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     background-color: var(--slate-50);
     border: 1px solid var(--slate-200);
     padding: 12px;
     border-radius: var(--radius-xl);
     transition: border-color 0.2s ease;
   }
   
   .milestone-item:hover {
     border-color: var(--slate-900);
   }
   
   .milestone-icon {
     background-color: var(--indigo-100);
     color: var(--indigo-600);
     border: 1px solid var(--indigo-200);
     padding: 4px;
     border-radius: 6px;
     margin-top: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .milestone-text {
     font-size: 16px;
     color: var(--slate-800);
     font-weight: 600;
     line-height: 1.625;
   }
   
   /* Leadership journey */
   
   .journey-text {
     display: flex;
     flex-direction: column;
     gap: 20px;
     color: var(--slate-700);
     font-size: 14px;
     font-weight: 500;
     line-height: 1.625;
   }
   
   .leadership-creed {
     background-color: var(--amber-300);
     color: var(--slate-950);
     border: 2px solid var(--slate-900);
     padding: 20px;
     border-radius: var(--radius-xl);
     box-shadow: 3px 3px 0 0 #0f172a;
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .leadership-creed-label {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .leadership-creed-label span {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 900;
   }
   
   .leadership-creed-quote {
     font-size: 18px;
     font-weight: 700;
     font-style: italic;
     line-height: 1.375;
   }
   
   /* Inner reflection */
   
   .reflection-title-row {
     display: flex;
     align-items: flex-start;
     gap: 12px;
   }
   
   .reflection-icon {
     background-color: var(--indigo-100);
     padding: 10px;
     border-radius: var(--radius-xl);
     border: 1px solid var(--indigo-200);
     color: var(--indigo-600);
     box-shadow: 1.5px 1.5px 0 0 #000;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .reflection-title {
     font-size: 24px;
     line-height: 1.4;
     font-weight: 700;
     color: var(--slate-900);
   }
   
   .reflection-body {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .reflection-text {
     color: var(--slate-700);
     font-size: 16px;
     line-height: 1.625;
     font-weight: 500;
   }
   
   .values-box {
     background-color: var(--slate-50);
     border: 2px solid var(--slate-200);
     border-radius: var(--radius-xl);
     padding: 16px;
   }
   
   .values-label {
     display: block;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--slate-400);
     font-weight: 600;
     margin-bottom: 8px;
   }
   
   .values-text {
     color: var(--slate-800);
     font-size: 14px;
     font-weight: 600;
     line-height: 1.625;
   }
   
   /* Lifestyle */
   
   .connect-box {
     background-color: var(--indigo-50);
     border: 2px solid var(--slate-900);
     border-radius: var(--radius-xl);
     padding: 16px;
     box-shadow: 2px 2px 0 0 rgba(15, 23, 42, 1);
   }
   
   .connect-label {
     display: block;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--indigo-600);
     font-weight: 700;
     margin-bottom: 4px;
   }
   
   .connect-text {
     color: var(--slate-800);
     font-size: 14px;
     font-weight: 600;
     line-height: 1.625;
   }
   
   .card-footer-link {
     margin-top: 24px;
     padding-top: 16px;
     border-top: 2px solid var(--slate-100);
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 12px;
     color: var(--slate-500);
     font-weight: 700;
   }
   
   .footer-url {
     display: flex;
     align-items: center;
     gap: 4px;
     color: var(--indigo-600);
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     transition: color 0.2s ease;
   }
   
   .footer-url:hover {
     text-decoration: underline;
     color: var(--indigo-800);
   }
   
   @keyframes pulse {
     0%,
     100% {
       opacity: 1;
     }
     50% {
       opacity: 0.5;
     }
   }
   
   /* ---------- Gallery ---------- */
   
   .section-block {
     display: flex;
     flex-direction: column;
     gap: 24px;
   }
   
   .section-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .section-header.connect-header {
    justify-content: center;
   }
   
   .section-title {
     font-size: 30px;
     line-height: 1.5;
     margin-top: 10px;
     font-weight: 700;
     letter-spacing: -0.025em;
     color: var(--slate-900);
   }
   
   .section-meta {
     display: none;
     color: var(--slate-400);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.05em;
   }
   
   .masonry {
     column-count: 1;
     column-gap: 24px;
   }
   
   .masonry-item {
     break-inside: avoid;
     position: relative;
     background-color: var(--white);
     border: 2px solid var(--slate-900);
     box-shadow: var(--shadow-hard-sm);
     border-radius: var(--radius-2xl);
     overflow: hidden;
     transition: all 0.3s ease;
     display: inline-block;
     width: 100%;
     margin-bottom: 24px;
   }
   
   .masonry-item:hover {
     box-shadow: 5px 5px 0 0 rgba(15, 23, 42, 1);
     transform: translate(-2px, -2px);
   }
   
   .masonry-media {
     position: relative;
     overflow: hidden;
     background-color: var(--slate-100);
   }
   
   .masonry-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
     object-position: center top;
   }
   
   .masonry-item:hover .masonry-media img {
     transform: scale(1.05);
   }
   
   .masonry-overlay {
     position: absolute;
     inset: 0;
     background-color: rgba(2, 6, 23, 0.2);
     opacity: 1;
     transition: opacity 0.3s ease;
     display: flex;
     align-items: flex-end;
     padding: 16px;
     pointer-events: none;
     z-index: 2;
   }
   

   
   .download-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    z-index: 3;
    pointer-events: none;
   }

   .masonry-item:hover .download-button {
    pointer-events: auto;
   }
   .download-button img {
    width: 20px;
    height: 20px;
    filter: brightness(0);

   }

   
   .masonry-label {
     font-size: 9px;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--white);
     background-color: rgba(2, 6, 23, 0.8);
     padding: 4px 8px;
     border-radius: 4px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     display: none;

   }
   
   /* Aspect ratios */
   .aspect-4-3 {
     aspect-ratio: 4 / 3;
   }
   .aspect-2-3 {
     aspect-ratio: 2 / 3;
   }
   .aspect-16-10 {
     aspect-ratio: 16 / 10;
   }
   .aspect-3-4 {
     aspect-ratio: 3 / 4;
   }
   .aspect-3-2 {
     aspect-ratio: 3 / 2;
   }
   .aspect-4-5 {
     aspect-ratio: 4 / 5;
   }
   .aspect-16-12 {
     aspect-ratio: 16 / 12;
   }
   .aspect-1-1 {
     aspect-ratio: 1 / 1;
   }
   
   /* ---------- Connect channels ---------- */
   
   .channels {
     display: none;
     grid-template-columns: 1fr;
     gap: 16px;
   }
   
   .channel {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px;
     border: 2px solid var(--slate-900);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-hard-sm);
     transition: all 0.2s ease;
   }
   
   .channel--link:hover {
     box-shadow: 5px 5px 0 0 rgba(15, 23, 42, 1);
     transform: translate(-2px, -2px);
     color: var(--white);
     text-decoration: none;
   }

   .channel--link:hover .channel-name,
   .channel--link:hover .channel-eyebrow,
   .channel--link:hover .channel-icon,
   .channel--link:hover .channel-icon .icon,
   .channel--link:hover svg {
     color: inherit;
     fill: currentColor;
     text-decoration: none;
   }
   
   .channel-icon {
     width: 44px;
     height: 44px;
     padding: 0;
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: inherit;
   }

   .channel-icon .icon {
     width: 25px;
     height: 25px;
     color: inherit;
     fill: currentColor;
   }
   
   .channel-eyebrow {
     display: block;
     font-size: 10px;
     line-height: 1.4;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 900;
     margin-bottom: 2px;
   }
   
   .channel-name {
     font-size: 16px;
     line-height: 1.4;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 4px;
     color: var(--white);
   }
   
   .channel--facebook {
     background-color: #1877f2;
     color: var(--white);
   }
   
   .channel--facebook:hover,
   .channel--facebook:focus,
   .channel--facebook:hover .channel-name,
   .channel--facebook:hover .channel-eyebrow,
   .channel--facebook:hover .channel-icon {
     color: var(--white);
   }
   
   .channel--facebook .channel-icon {
     background-color: rgba(255, 255, 255, 0.15);
     color: var(--white);
   }
   
   .channel--facebook .channel-eyebrow {
     color: #dbeafe;
   }

   .channel--facebook:hover .channel-eyebrow {
     color: #dbeafe;
   }

   .channel--instagram {
     background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
     color: var(--white);
   }

   .channel--instagram:hover,
   .channel--instagram:focus,
   .channel--instagram:hover .channel-name,
   .channel--instagram:hover .channel-eyebrow,
   .channel--instagram:hover .channel-icon {
     color: var(--white);
   }
   
   .channel--instagram .channel-icon {
     background-color: rgba(255, 255, 255, 0.15);
     color: var(--white);
   }
   
   .channel--instagram .channel-eyebrow {
     color: #fce7f3;
   }

   .channel--instagram:hover .channel-eyebrow {
     color: #fce7f3;
   }
   
   .channel--linkedin {
     background-color: var(--linkedin);
     color: var(--white);
   }

   .channel--linkedin:hover,
   .channel--linkedin:focus,
   .channel--linkedin:hover .channel-name,
   .channel--linkedin:hover .channel-eyebrow,
   .channel--linkedin:hover .channel-icon {
     color: var(--white);
   }
   
   .channel--linkedin .channel-icon {
     background-color: rgba(255, 255, 255, 0.15);
     color: var(--white);
   }
   
   .channel--linkedin .channel-eyebrow {
     color: #dbeafe;
   }

   .channel--linkedin:hover .channel-eyebrow {
     color: #dbeafe;
   }
   
   .channel--x {
     background-color: var(--slate-900);
     color: var(--white);
   }

   .channel--x:hover,
   .channel--x:focus,
   .channel--x:hover .channel-name,
   .channel--x:hover .channel-eyebrow,
   .channel--x:hover .channel-icon {
     color: var(--white);
   }
   
   .channel--x .channel-icon {
     background-color: rgba(255, 255, 255, 0.1);
     color: var(--white);
   }
   
   .channel--x .channel-eyebrow {
     color: var(--slate-300);
   }

   .channel--x:hover .channel-eyebrow {
     color: var(--slate-300);
   }
   
   .channel--youtube {
     background-color: #ff0000;
     color: var(--white);
   }

   .channel--youtube:hover,
   .channel--youtube:focus,
   .channel--youtube:hover .channel-name,
   .channel--youtube:hover .channel-eyebrow,
   .channel--youtube:hover .channel-icon {
     color: var(--white);
   }
   
   .channel--youtube .channel-icon {
     background-color: rgba(255, 255, 255, 0.15);
     color: var(--white);
   }
   
   .channel--youtube .channel-eyebrow {
     color: #fecaca;
   }

   .channel--youtube:hover .channel-eyebrow {
     color: #fecaca;
   }
   
   /* ---------- Responsive ---------- */
   @media (min-width: 768px) {
  
   
    .masthead {
      flex-direction: row;
      align-items: center;
      gap: 24px;
    }

    .reflection-title-row { align-items: center; }
    .masthead-left {
        align-items: flex-start;
    }

    .masthead-info { text-align: left; }
      

    .section-header.connect-header {
        justify-content: flex-start;
       }
    .social-header {
      align-self: flex-start;
      width: auto;
    }
    .social-header.footer-social-header { display: none; }

    .portrait {
      width: 198px;
      height: 198px;
    }

    .milestone-text {
      font-size: 14px;
    }
  
  
    .creed-quote {
      font-size: 40px;
    }
  
    .bento-grid {
      grid-template-columns: repeat(12, 1fr);
    }

    .reflection-text { font-size: 14px; }
    .leadership-creed-quote { font-size: 16px; }
    .reflection-title { font-size: 22px; }

  
    .card--half {
      grid-column: span 6;
    }
  
    .card--full {
      grid-column: span 12;
    }
  
    .masonry {
      column-count: 2;
    }
  
    .channels {
        display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
  }

   @media (min-width: 992px) {
  
   
     .masthead-left {
       flex-direction: row;
       align-items: center;
     }
   
     .portrait {
       width: 204px;
       height: 204px;
       object-position: center top;
     }
   
     .masthead-title {
       font-size: 48px;
     }
   
     .social-header {
       align-self: center;
     }
   
     .card {
       padding: 32px;
     }

   
     .bio-box {
       padding: 24px;
     }
   
     .bio-lead {
       font-size: 20px;
     }
   
     .bio-body {
       font-size: 18px;
     }
   
     .creed-quote {
       font-size: 48px;
     }
   
     .milestone-text {
       font-size: 16px;
     }
   
     .journey-text {
       font-size: 16px;
     }
   
     .leadership-creed-quote {
       font-size: 20px;
     }
   
     .reflection-text {
       font-size: 18px;
     }
   
     .values-label, .connect-label {
        font-size: 12px;
   
      }

      .reflection-title { font-size: 24px; }
      
      
     .values-text {
       font-size: 16px;
     }
   
     .connect-text {
       font-size: 16px;
     }
   
     .section-meta {
       display: block;
     }
   
     .masonry {
       column-count: 3;
     }
   
     .channels {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   
   @media (min-width: 1200px) {
    .masonry {
    column-count: 4;
    }

    .masonry-overlay {
  
      opacity: 0;

    }
    
    .masonry-item:hover .masonry-overlay {
      opacity: 1;
    }


    .channels {
    grid-template-columns: repeat(5, 1fr);
    }

    
    .bento-grid { gap: 36px; }
    .executive-profile-container.container { gap: 46px; padding-block: 50px 60px; }
    .masonry { column-gap: 36px; }
    .masonry-item { margin-bottom: 36px; }

    .social-btn .icon { width: 24px; height: 24px; }
    .social-btn { width: 52px; height: 52px; border-radius: 14px; }
    .social-btn--facebook .icon { width: 28px; height: 28px; }
   }

   @media (min-width: 1499px) {
 
    .bento-grid { gap: 50px; }
    .executive-profile-container.container { gap: 50px; }

    .masonry { column-gap: 50px; }
    .masonry-item { margin-bottom: 50px; }
    .section-block { gap: 30px; }

    .social-btn { width: 52px; height: 52px; border-radius: 14px; }
   }