{"id":14,"date":"2026-03-16T19:03:03","date_gmt":"2026-03-16T19:03:03","guid":{"rendered":"https:\/\/demowebdesign.live\/michael-barnes\/index.php\/about-us\/"},"modified":"2026-05-12T18:27:55","modified_gmt":"2026-05-12T18:27:55","slug":"meet-dr-barnes","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/michael-barnes\/meet-dr-barnes\/","title":{"rendered":"Meet Dr Barnes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14\" class=\"elementor elementor-14\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33b11f6 e-flex e-con-boxed e-con e-parent\" data-id=\"33b11f6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-032933a e-con-full e-flex e-con e-child\" data-id=\"032933a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-671748a elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"671748a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9aaf5bf e-con-full e-flex e-con e-child\" data-id=\"9aaf5bf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee3a822 elementor-widget elementor-widget-heading\" data-id=\"ee3a822\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">About Dr. Michael J. Barnes<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9a69dbc e-flex e-con-boxed e-con e-parent\" data-id=\"9a69dbc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-90ca037 e-con-full e-flex e-con e-child\" data-id=\"90ca037\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f74a75f elementor-widget elementor-widget-heading\" data-id=\"f74a75f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">01<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfd7617 elementor-widget elementor-widget-heading\" data-id=\"dfd7617\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Author<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19179c6 e-con-full e-flex e-con e-child\" data-id=\"19179c6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c55f880 elementor-widget elementor-widget-heading\" data-id=\"c55f880\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Dr. Michael J. Barnes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5ba2ac7 e-flex e-con-boxed e-con e-parent\" data-id=\"5ba2ac7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1dbd64 elementor-widget elementor-widget-html\" data-id=\"a1dbd64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root {\r\n    --gold:       #B8960C;\r\n    --gold-light: #D4AF37;\r\n    --gold-glow:  #e8c84a33;\r\n    --cream:      #F5EFE0;\r\n    --ink:        #0D0D0D;\r\n    --ink-mid:    #1a1a1a;\r\n    --ink-soft:   #2e2e2e;\r\n    --text-muted: #8a8070;\r\n    --white:      #ffffff;\r\n  }\r\n\r\n  body {\r\n    margin: 0;\r\n    background: #0D0D0D;\r\n    font-family: 'Outfit', sans-serif;\r\n  }\r\n\r\n  body::before {\r\n    content: '';\r\n    position: fixed; inset: 0;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n    pointer-events: none; z-index: 999;\r\n    opacity: .5;\r\n  }\r\n\r\n  .author-section {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 40px 40px 120px;\r\n  }\r\n\r\n  \/* \u2500\u2500 HERO: photo left, bio right \u2500\u2500 *\/\r\n  .hero-grid {\r\n    display: grid;\r\n    grid-template-columns: 380px 1fr;\r\n    gap: 0;\r\n    align-items: stretch;\r\n    border: 1px solid #2a2618;\r\n    background: var(--ink-mid);\r\n    position: relative;\r\n    overflow: hidden;\r\n    animation: fadeUp .9s ease both;\r\n  }\r\n\r\n  .hero-grid::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: radial-gradient(ellipse 60% 60% at 30% 50%, #b8960c0d 0%, transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* \u2500\u2500 Photo pane (LEFT) \u2500\u2500 *\/\r\n  .author-photo-wrap {\r\n    position: relative;\r\n    overflow: hidden;\r\n    min-height: 480px;\r\n    background: #0f0e0a;\r\n  }\r\n\r\n  .author-photo-wrap::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      linear-gradient(to left,  var(--ink-mid) 0%, transparent 30%),\r\n      linear-gradient(to top,    var(--ink-mid) 0%, transparent 20%);\r\n    pointer-events: none;\r\n    z-index: 2;\r\n  }\r\n\r\n  .deco-letter {\r\n    position: absolute;\r\n    bottom: -20px; right: -10px;\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 260px;\r\n    font-weight: 700;\r\n    color: rgba(184,150,12,0.06);\r\n    line-height: 1;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    user-select: none;\r\n  }\r\n\r\n  .author-photo {\r\n    width: 100%; height: 100% !important;\r\n    object-fit: cover;\r\n    object-position: center top;\r\n    display: block;\r\n    filter: grayscale(20%) contrast(1.05);\r\n    transition: transform 8s ease;\r\n  }\r\n  .author-photo-wrap:hover .author-photo {\r\n    transform: scale(1.04);\r\n  }\r\n\r\n  \/* \u2500\u2500 Author text pane (RIGHT) \u2500\u2500 *\/\r\n  .author-info {\r\n    padding: 56px 56px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  .author-role {\r\n    font-size: 11px;\r\n    font-weight: 500;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .author-name {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(36px, 4vw, 56px);\r\n    font-weight: 700;\r\n    line-height: 1.1;\r\n    color: var(--cream);\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  .author-name span {\r\n    color: var(--gold-light);\r\n    font-style: italic;\r\n  }\r\n\r\n  .author-bio {\r\n    font-size: 16px;\r\n    font-weight: 300;\r\n    line-height: 1.8;\r\n    color: #fff;\r\n    margin-bottom: 40px;\r\n    max-width: 540px;\r\n  }\r\n\r\n  .stat-row {\r\n    display: flex;\r\n    gap: 40px;\r\n    padding-top: 32px;\r\n    border-top: 1px solid #2a2618;\r\n  }\r\n\r\n  .stat { display: flex; flex-direction: column; gap: 4px; }\r\n  .stat-num {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 36px;\r\n    font-weight: 600;\r\n    color: var(--gold-light);\r\n    line-height: 1;\r\n  }\r\n  .stat-label {\r\n    font-size: 11px;\r\n    letter-spacing: .12em;\r\n    text-transform: uppercase;\r\n    color: #fff;\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     BOOKS HEADING\r\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  .books-heading {\r\n    margin-top: 80px;\r\n    margin-bottom: 48px;\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n    animation: fadeUp .9s .15s ease both;\r\n  }\r\n\r\n  .books-heading h2 {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(32px, 4vw, 52px);\r\n    font-weight: 600;\r\n    line-height: 1.1;\r\n    color: var(--cream);\r\n    margin: 0;\r\n  }\r\n\r\n  .books-heading h2 em {\r\n    display: block;\r\n    font-style: italic;\r\n    color: var(--gold-light);\r\n  }\r\n\r\n  .divider-line {\r\n    flex: 1;\r\n    height: 1px;\r\n    background: linear-gradient(to right, #2a2618, transparent);\r\n    margin: 0 40px 8px;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     BOOKS GRID \u2014 3 columns, no slider\r\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  .books-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 2px;\r\n    background: #2a2618;\r\n    animation: fadeUp .9s .25s ease both;\r\n  }\r\n\r\n  .book-card {\r\n    background: var(--ink-mid);\r\n    padding: 48px 36px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 28px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: background .4s;\r\n    cursor: default;\r\n  }\r\n\r\n  .book-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0;\r\n    background: radial-gradient(ellipse 50% 60% at var(--mx,50%) var(--my,50%), #b8960c0e, transparent 70%);\r\n    transition: opacity .4s;\r\n    pointer-events: none;\r\n  }\r\n  .book-card:hover::before { opacity: 1; }\r\n\r\n  .book-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);\r\n    transform: scaleX(0);\r\n    transition: transform .5s ease;\r\n  }\r\n  .book-card:hover::after { transform: scaleX(1); }\r\n\r\n  \/* \u2500\u2500 Book cover \u2500\u2500 *\/\r\n  .book-cover-wrap {\r\n    position: relative;\r\n    width: 160px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .book-cover-wrap::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -20px -10px;\r\n    border-radius: 4px;\r\n    background: radial-gradient(ellipse 80% 80% at 50% 50%, #b8960c1a, transparent 70%);\r\n    opacity: 0;\r\n    transition: opacity .5s;\r\n  }\r\n  .book-card:hover .book-cover-wrap::before { opacity: 1; }\r\n\r\n  .book-img {\r\n    width: 160px;\r\n    height: 220px;\r\n    border-radius: 2px;\r\n    object-fit: cover;\r\n    box-shadow:\r\n      -6px 6px 24px rgba(0,0,0,.7),\r\n      0 2px 8px rgba(0,0,0,.4);\r\n    transition: transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s;\r\n    transform-origin: center bottom;\r\n  }\r\n  .book-card:hover .book-img {\r\n    transform: rotate(-2deg) translateY(-6px) scale(1.04);\r\n  }\r\n\r\n  \/* \u2500\u2500 Book text \u2500\u2500 *\/\r\n  .book-text {\r\n    flex: 1;\r\n    text-align: center;\r\n    position: relative;\r\n    z-index: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n\r\n  .book-tag {\r\n    display: inline-block;\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .book-title {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n    color: var(--cream);\r\n    margin-bottom: 14px;\r\n  }\r\n\r\n  .book-desc {\r\n    font-size: 13px;\r\n    font-weight: 300;\r\n    line-height: 1.75;\r\n    color: #ccc;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .book-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .12em;\r\n    text-transform: uppercase;\r\n    color: var(--gold-light);\r\n    text-decoration: none;\r\n    transition: gap .3s;\r\n    margin-top: auto;\r\n  }\r\n  .book-cta::after {\r\n    content: '\u2192';\r\n    transition: transform .3s;\r\n  }\r\n  .book-card:hover .book-cta { gap: 14px; }\r\n  .book-card:hover .book-cta::after { transform: translateX(4px); }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     ANIMATIONS\r\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  \/* \u2500\u2500 Responsive \u2500\u2500 *\/\r\n  @media (max-width: 1024px) {\r\n    .hero-grid { grid-template-columns: 320px 1fr; }\r\n    .books-grid { grid-template-columns: repeat(3, 1fr); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .hero-grid { grid-template-columns: 1fr; }\r\n    .author-photo-wrap {\r\n      min-height: 320px;\r\n      order: -1;\r\n    }\r\n    .author-photo-wrap::after {\r\n      background:\r\n        linear-gradient(to top, var(--ink-mid) 0%, transparent 40%),\r\n        linear-gradient(to bottom, var(--ink-mid) 0%, transparent 20%);\r\n    }\r\n    .author-info { padding: 40px 32px; }\r\n    .stat-row { gap: 24px; flex-wrap: wrap; }\r\n    .books-grid { grid-template-columns: repeat(2, 1fr); }\r\n    .books-heading { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 56px; }\r\n    .divider-line { display: none; }\r\n    .author-section { padding: 32px 20px 80px; }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .books-grid { grid-template-columns: 1fr; }\r\n    .book-card { padding: 40px 28px; }\r\n    .stat-row { gap: 20px; }\r\n  }\r\n\r\n  @media (max-width: 400px) {\r\n    .author-name { font-size: 32px; }\r\n    .stat-row { flex-direction: column; gap: 16px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"author-section\">\r\n\r\n  <!-- \u2500\u2500 HERO CARD: photo left, bio right \u2500\u2500 -->\r\n  <div class=\"hero-grid\">\r\n    <!-- Photo (LEFT) -->\r\n    <div class=\"author-photo-wrap\">\r\n      <div class=\"deco-letter\">B<\/div>\r\n      <img decoding=\"async\"\r\n        class=\"author-photo\"\r\n        src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg\"\r\n        alt=\"Dr. Michael J. Barnes\"\r\n      >\r\n    <\/div>\r\n\r\n    <!-- Bio (RIGHT) -->\r\n    <div class=\"author-info\">\r\n      <div class=\"author-role\">Educator \u00b7 Superintendent \u00b7 Author<\/div>\r\n      <h1 class=\"author-name\">\r\n        Dr. Michael J.<br><span>Barnes<\/span>\r\n      <\/h1>\r\n      <p class=\"author-bio\">\r\n        An experienced educator, superintendent, and thought leader dedicated to transforming education through instructional leadership and innovation. With over three decades in education, he has led strategic initiatives that enhance student learning, foster community partnerships, and advance school leadership.\r\n      <\/p>\r\n      <p class=\"author-bio\">\r\n       Throughout his career, he has led forward-thinking strategic initiatives designed to elevate student achievement, integrate modern teaching practices, and create inclusive learning environments where all students can thrive. His leadership style emphasizes collaboration, continuous improvement, and the thoughtful use of data to inform decision-making and drive sustainable change.\r\n       He is also known for building meaningful partnerships with families, community organizations, and stakeholders, recognizing that education extends beyond the classroom. By fostering these connections, he has helped create support systems that enrich student learning and strengthen the broader educational ecosystem.\r\n      <\/p>\r\n      <div class=\"stat-row\">\r\n        <div class=\"stat\">\r\n          <span class=\"stat-num\">30+<\/span>\r\n          <span class=\"stat-label\">Years in Education<\/span>\r\n        <\/div>\r\n        <div class=\"stat\">\r\n          <span class=\"stat-num\">3<\/span>\r\n          <span class=\"stat-label\">Published Books<\/span>\r\n        <\/div>\r\n        <div class=\"stat\">\r\n          <span class=\"stat-num\">\u221e<\/span>\r\n          <span class=\"stat-label\">Leaders Inspired<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div><!-- \/hero-grid -->\r\n\r\n  <!-- \u2500\u2500 BOOKS HEADING \u2500\u2500 -->\r\n  <div class=\"books-heading\">\r\n    <h2>Published <em>Works<\/em><\/h2>\r\n    <div class=\"divider-line\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- \u2500\u2500 BOOKS: 3-column grid, no slider \u2500\u2500 -->\r\n  <div class=\"books-grid\">\r\n\r\n    <!-- Book 1 -->\r\n    <div class=\"book-card\"\r\n         onmousemove=\"this.style.setProperty('--mx',((event.clientX-this.getBoundingClientRect().left)\/this.offsetWidth*100)+'%');this.style.setProperty('--my',((event.clientY-this.getBoundingClientRect().top)\/this.offsetHeight*100)+'%')\">\r\n      <div class=\"book-cover-wrap\">\r\n        <img decoding=\"async\" class=\"book-img\"\r\n             src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/BOOK-1-scaled.png\"\r\n             alt=\"The Modern Superintendent Book Cover\">\r\n      <\/div>\r\n      <div class=\"book-text\">\r\n        <span class=\"book-tag\">Strategy \u00b7 Education<\/span>\r\n        <h3 class=\"book-title\">The Modern Superintendent: A Guide to Instructional Leadership<\/h3>\r\n        <p class=\"book-desc\">\r\n          A definitive roadmap for today's school district leaders blending research driven strategy with practical tools that transform culture and accelerate student achievement.\r\n        <\/p>\r\n        <a href=\"https:\/\/www.amazon.com\/dp\/B0D5PF1C28\" class=\"book-cta\">Explore the Book<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Book 2 -->\r\n    <div class=\"book-card\"\r\n         onmousemove=\"this.style.setProperty('--mx',((event.clientX-this.getBoundingClientRect().left)\/this.offsetWidth*100)+'%');this.style.setProperty('--my',((event.clientY-this.getBoundingClientRect().top)\/this.offsetHeight*100)+'%')\">\r\n      <div class=\"book-cover-wrap\">\r\n        <img decoding=\"async\" class=\"book-img\"\r\n             src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/BOOK-2-scaled.png\"\r\n             alt=\"Winning Book Cover\">\r\n      <\/div>\r\n      <div class=\"book-text\">\r\n        <span class=\"book-tag\">Life \u00b7 Leadership<\/span>\r\n        <h3 class=\"book-title\">Winning: Lessons on Life, Learning and Leadership<\/h3>\r\n        <p class=\"book-desc\">\r\n          A powerful collection of lessons drawn from decades of experience in education, sport, and service designed to equip emerging leaders with the mindset to excel.\r\n        <\/p>\r\n        <a href=\"https:\/\/www.amazon.com\/dp\/B0F7Y5NJ5R\" class=\"book-cta\">Explore the Book<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Book 3 -->\r\n    <div class=\"book-card\"\r\n         onmousemove=\"this.style.setProperty('--mx',((event.clientX-this.getBoundingClientRect().left)\/this.offsetWidth*100)+'%');this.style.setProperty('--my',((event.clientY-this.getBoundingClientRect().top)\/this.offsetHeight*100)+'%')\">\r\n      <div class=\"book-cover-wrap\">\r\n        <img decoding=\"async\" class=\"book-img\"\r\n             src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/V5-4-3-26-Updated__1___1_-removebg-preview.png\"\r\n             alt=\"Building Literacy Together Book Cover\">\r\n      <\/div>\r\n      <div class=\"book-text\">\r\n        <span class=\"book-tag\">Vision \u00b7 Impact<\/span>\r\n        <h3 class=\"book-title\">Building Literacy Together<\/h3>\r\n        <p class=\"book-desc\">\r\n          A call to reimagine literacy not simply as a set of academic skills, but as the foundation of identity, agency, and participation in a democratic society.\r\n        <\/p>\r\n        <a href=\"https:\/\/www.amazon.com\/dp\/B0GS5D5G3Y\" class=\"book-cta\">Explore the Book<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/books-grid -->\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6101931 e-flex e-con-boxed e-con e-parent\" data-id=\"6101931\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-601ecbf elementor-widget elementor-widget-html\" data-id=\"601ecbf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap');\r\n\r\n  .mta-section {\r\n    font-family: 'Outfit', sans-serif;\r\n    background: #0D0D0D;\r\n    padding: 80px 48px;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .mta-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, #B8960C55, transparent);\r\n  }\r\n\r\n  .mta-section::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 0; left: 0; right: 0;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, #B8960C55, transparent);\r\n  }\r\n\r\n  .mta-eyebrow {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    margin-bottom: 48px;\r\n  }\r\n\r\n  .mta-eyebrow-line {\r\n    width: 40px;\r\n    height: 1px;\r\n    background: #B8960C;\r\n  }\r\n\r\n  .mta-eyebrow-text {\r\n    font-size: 11px;\r\n    font-weight: 500;\r\n    letter-spacing: .22em;\r\n    text-transform: uppercase;\r\n    color: #B8960C;\r\n  }\r\n\r\n  .mta-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 420px;\r\n    gap: 72px;\r\n    align-items: center;\r\n  }\r\n\r\n  \/* \u2500\u2500 LEFT: Content \u2500\u2500 *\/\r\n  .mta-left {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0;\r\n  }\r\n\r\n  .mta-heading {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(40px, 5vw, 62px);\r\n    font-weight: 700;\r\n    line-height: 1.1;\r\n    color: #F5EFE0;\r\n    margin: 0 0 10px;\r\n    letter-spacing: -0.5px;\r\n  }\r\n\r\n  .mta-heading em {\r\n    font-style: italic;\r\n    color: #D4AF37;\r\n  }\r\n\r\n  .mta-title-rule {\r\n    width: 64px;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, #B8960C, transparent);\r\n    margin: 20px 0 28px;\r\n  }\r\n\r\n  .mta-role-tags {\r\n    display: flex;\r\n    gap: 10px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .mta-tag {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: .18em;\r\n    text-transform: uppercase;\r\n    color: #0D0D0D;\r\n    background: #B8960C;\r\n    padding: 5px 14px;\r\n    border-radius: 1px;\r\n  }\r\n\r\n  .mta-tag.outline {\r\n    background: transparent;\r\n    color: #B8960C;\r\n    border: 1px solid #B8960C44;\r\n  }\r\n\r\n  .mta-bio {\r\n    font-size: 15px;\r\n    font-weight: 300;\r\n    line-height: 1.85;\r\n    color: #c8bfaf;\r\n    margin: 0 0 20px;\r\n  }\r\n\r\n  .mta-bio strong {\r\n    font-weight: 500;\r\n    color: #F5EFE0;\r\n  }\r\n\r\n  .mta-quote-block {\r\n    border-left: 2px solid #B8960C;\r\n    padding: 16px 24px;\r\n    margin: 20px 0;\r\n    background: rgba(184,150,12,0.04);\r\n  }\r\n\r\n  .mta-quote-text {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 20px;\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    line-height: 1.65;\r\n    color: #D4AF37;\r\n    margin: 0;\r\n  }\r\n\r\n  .mta-stats {\r\n    display: flex;\r\n    gap: 0;\r\n    margin-top: 36px;\r\n    border-top: 1px solid #2a2618;\r\n    padding-top: 32px;\r\n  }\r\n\r\n  .mta-stat {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 5px;\r\n    padding-right: 24px;\r\n    position: relative;\r\n  }\r\n\r\n  .mta-stat + .mta-stat {\r\n    padding-left: 24px;\r\n    padding-right: 24px;\r\n  }\r\n\r\n  .mta-stat + .mta-stat::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 8px;\r\n    bottom: 8px;\r\n    width: 1px;\r\n    background: #2a2618;\r\n  }\r\n\r\n  .mta-stat-num {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 38px;\r\n    font-weight: 600;\r\n    color: #D4AF37;\r\n    line-height: 1;\r\n  }\r\n\r\n  .mta-stat-label {\r\n    font-size: 10px;\r\n    letter-spacing: .15em;\r\n    text-transform: uppercase;\r\n    color: #6a6055;\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* \u2500\u2500 RIGHT: Image \u2500\u2500 *\/\r\n  .mta-right {\r\n    position: relative;\r\n  }\r\n\r\n  .mta-img-frame {\r\n    position: relative;\r\n  }\r\n\r\n  .mta-img-frame::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -12px; right: -12px;\r\n    width: 100%; height: 100%;\r\n    border: 1px solid #B8960C44;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .mta-img-frame::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -12px; left: -12px;\r\n    width: 100%; height: 100%;\r\n    border: 1px solid #B8960C22;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .mta-author-img {\r\n    width: 100%;\r\n    height: 560px;\r\n    object-fit: cover;\r\n    object-position: center top;\r\n    display: block;\r\n    position: relative;\r\n    z-index: 1;\r\n    filter: grayscale(15%) contrast(1.05);\r\n  }\r\n\r\n  .mta-img-caption {\r\n    position: absolute;\r\n    bottom: 0; left: 0; right: 0;\r\n    z-index: 2;\r\n    padding: 48px 28px 24px;\r\n    background: linear-gradient(to top, rgba(13,13,13,0.92) 0%, transparent 100%);\r\n  }\r\n\r\n  .mta-img-name {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    color: #F5EFE0;\r\n    margin: 0 0 4px;\r\n  }\r\n\r\n  .mta-img-title {\r\n    font-size: 11px;\r\n    font-weight: 500;\r\n    letter-spacing: .18em;\r\n    text-transform: uppercase;\r\n    color: #B8960C;\r\n    margin: 0;\r\n  }\r\n\r\n  .mta-corner-ornament {\r\n    position: absolute;\r\n    top: -1px; left: -1px;\r\n    width: 24px; height: 24px;\r\n    border-top: 2px solid #B8960C;\r\n    border-left: 2px solid #B8960C;\r\n    z-index: 3;\r\n  }\r\n\r\n  .mta-corner-ornament.br {\r\n    top: auto; left: auto;\r\n    bottom: -1px; right: -1px;\r\n    border-top: none; border-left: none;\r\n    border-bottom: 2px solid #B8960C;\r\n    border-right: 2px solid #B8960C;\r\n  }\r\n\r\n  @media (max-width: 860px) {\r\n    .mta-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 48px;\r\n    }\r\n    .mta-section {\r\n      padding: 56px 28px;\r\n    }\r\n    .mta-author-img {\r\n      height: 420px;\r\n      object-position: center 15%;\r\n    }\r\n    .mta-right { order: -1; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"mta-section\">\r\n\r\n  <div class=\"mta-eyebrow\">\r\n    <div class=\"mta-eyebrow-line\"><\/div>\r\n    <span class=\"mta-eyebrow-text\">Meet the Author<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"mta-grid\">\r\n\r\n    <!-- LEFT: Content -->\r\n    <div class=\"mta-left\">\r\n  <h2 class=\"mta-heading\">\r\n    Meet the Author:<br><em>Dr. Michael J. Barnes<\/em>\r\n  <\/h2>\r\n  <div class=\"mta-title-rule\"><\/div>\r\n\r\n  <div class=\"mta-role-tags\">\r\n    <span class=\"mta-tag outline\">LIFE. LEARNING. LEADERSHIP.<\/span>\r\n  <\/div>\r\n\r\n  <p class=\"mta-bio\">\r\n    Join Dr. Michael J. Barnes as he discusses his book,\r\n    <strong>WINNING: Lessons on Life, Learning and Leadership<\/strong>\r\n  <\/p>\r\n\r\n  <div class=\"mta-quote-block\">\r\n    <p class=\"mta-quote-text\">May 13, 2026<br>Lakewood Public Library<br>7\u20138 p.m.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"mta-quote-block\">\r\n    <p class=\"mta-quote-text\">June 15, 2026<br>\r\n    Mayfield Public Library<br>\r\n    7\u20138 p.m.<\/p>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n    <!-- RIGHT: Image -->\r\n    <div class=\"mta-right\">\r\n      <div class=\"mta-img-frame\">\r\n        <div class=\"mta-corner-ornament\"><\/div>\r\n        <div class=\"mta-corner-ornament br\"><\/div>\r\n        <img decoding=\"async\"\r\n          class=\"mta-author-img\"\r\n          src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/05\/post.jpg\"\r\n          alt=\"Dr. Michael J. Barnes \u2014 Educator, Superintendent, and Author\"\r\n        >\r\n       \r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3955e68 e-flex e-con-boxed e-con e-parent\" data-id=\"3955e68\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d635fb elementor-widget elementor-widget-html\" data-id=\"8d635fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root {\r\n    --gold: #B8960C;\r\n    --gold-light: #D4AF37;\r\n    --cream: #F5EFE0;\r\n    --ink: #0D0D0D;\r\n    --ink-mid: #1a1a1a;\r\n    --ink-soft: #2e2e2e;\r\n    --border: #2a2618;\r\n    --text-muted: #8a8070;\r\n  }\r\n  * { box-sizing: border-box; margin: 0; padding: 0; }\r\n  body { background: var(--ink); font-family: 'Outfit', sans-serif; }\r\n\r\n  .mta-section {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    padding: 60px 40px 80px;\r\n  }\r\n\r\n  \/* \u2500\u2500 MAIN CARD \u2500\u2500 *\/\r\n  .mta-card {\r\n    background: var(--ink-mid);\r\n    border: 1px solid var(--border);\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: grid;\r\n    grid-template-columns: 400px 1fr;\r\n    min-height: 600px;\r\n    animation: fadeUp .9s ease both;\r\n  }\r\n\r\n  \/* subtle gold radial glow *\/\r\n  .mta-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    width: 700px; height: 700px;\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle, rgba(184,150,12,0.07) 0%, transparent 65%);\r\n    top: -200px; right: -100px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* noise overlay *\/\r\n  .mta-card::after {\r\n    content: '';\r\n    position: absolute; inset: 0;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'\/%3E%3C\/svg%3E\");\r\n    pointer-events: none; z-index: 0; opacity: .5;\r\n  }\r\n\r\n  \/* \u2500\u2500 LEFT: photo pane \u2500\u2500 *\/\r\n  .mta-photo-pane {\r\n    position: relative;\r\n    overflow: hidden;\r\n    background: #0f0e0a;\r\n  }\r\n\r\n  \/* headline overlay *\/\r\n  .mta-headline {\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0;\r\n    padding: 36px 32px 0;\r\n    z-index: 3;\r\n  }\r\n\r\n  .mta-meet {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 50px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n    color: var(--gold-light);\r\n    display: block;\r\n  }\r\n\r\n  .mta-the-author {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 50px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n    color: var(--cream);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  \/* arrow accent \u2014 gold instead of red *\/\r\n  .mta-arrow {\r\n    display: inline-flex;\r\n    width: 44px; height: 44px;\r\n    background: var(--gold);\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n  }\r\n  .mta-arrow svg { width: 22px; height: 22px; }\r\n\r\n  \/* photo *\/\r\n  .mta-photo {\r\n    position: absolute;\r\n    bottom: 0; left: 0;\r\n    width: 100%;\r\n    height: 68%;\r\n    object-fit: cover;\r\n    object-position: center top;\r\n    filter: grayscale(15%) contrast(1.05);\r\n    z-index: 2;\r\n    -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%),\r\n                        linear-gradient(to right, black 80%, transparent 100%);\r\n    mask-image: linear-gradient(to top, black 55%, transparent 100%),\r\n                linear-gradient(to right, black 80%, transparent 100%);\r\n    -webkit-mask-composite: destination-in;\r\n    mask-composite: intersect;\r\n    transition: transform 8s ease;\r\n  }\r\n  .mta-photo-pane:hover .mta-photo { transform: scale(1.03); }\r\n\r\n  \/* decorative large letter *\/\r\n  .deco-letter {\r\n    position: absolute;\r\n    bottom: 50px; right: -8px;\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 220px;\r\n    font-weight: 700;\r\n    color: rgba(184,150,12,0.05);\r\n    line-height: 1;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    user-select: none;\r\n  }\r\n\r\n  \/* name badge *\/\r\n  .mta-name-badge {\r\n    position: absolute;\r\n    bottom: 0; left: 0; right: 0;\r\n    padding: 24px 28px;\r\n    background: linear-gradient(to top, rgba(13,13,13,0.97) 0%, transparent 100%);\r\n    z-index: 4;\r\n    border-top: 1px solid var(--border);\r\n  }\r\n  .mta-name-badge h3 {\r\n    font-family: 'Outfit', sans-serif;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    letter-spacing: .1em;\r\n    color: var(--cream);\r\n    text-transform: uppercase;\r\n    margin-bottom: 4px;\r\n  }\r\n  .mta-name-badge p {\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    color: var(--gold-light);\r\n    letter-spacing: .06em;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* \u2500\u2500 RIGHT: content pane \u2500\u2500 *\/\r\n  .mta-content-pane {\r\n    padding: 44px 48px 40px 44px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    z-index: 1;\r\n    border-left: 1px solid var(--border);\r\n  }\r\n\r\n  \/* eyebrow *\/\r\n  .mta-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-family: 'Outfit', sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .25em;\r\n    text-transform: uppercase;\r\n    color: var(--gold-light);\r\n    margin-bottom: 32px;\r\n  }\r\n  .mta-eyebrow::before {\r\n    content: '';\r\n    display: block;\r\n    width: 28px; height: 1px;\r\n    background: var(--gold-light);\r\n  }\r\n\r\n  \/* book row *\/\r\n  .mta-book-row {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 24px;\r\n    margin-bottom: 32px;\r\n    padding-bottom: 32px;\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n\r\n  .mta-book-img {\r\n    width: 110px;\r\n    flex-shrink: 0;\r\n    border-radius: 2px;\r\n    box-shadow: -5px 7px 24px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);\r\n    transition: transform .5s cubic-bezier(.25,.46,.45,.94);\r\n  }\r\n  .mta-book-img:hover { transform: rotate(-3deg) translateY(-5px) scale(1.04); }\r\n\r\n  .mta-book-meta { flex: 1; }\r\n\r\n  .mta-book-tag {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    display: block;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .mta-book-title {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 21px;\r\n    font-weight: 700;\r\n    line-height: 1.25;\r\n    color: var(--cream);\r\n    margin-bottom: 14px;\r\n  }\r\n\r\n  .mta-book-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .14em;\r\n    text-transform: uppercase;\r\n    color: var(--gold-light);\r\n    text-decoration: none;\r\n    transition: gap .3s;\r\n  }\r\n  .mta-book-cta::after { content: '\u2192'; transition: transform .3s; }\r\n  .mta-book-cta:hover { gap: 14px; }\r\n  .mta-book-cta:hover::after { transform: translateX(4px); }\r\n\r\n  \/* body text *\/\r\n  .mta-body {\r\n    font-size: 15px;\r\n    font-weight: 300;\r\n    line-height: 1.85;\r\n    color: #fff;\r\n    margin-bottom: 28px;\r\n  }\r\n  .mta-body strong {\r\n    color: var(--cream);\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* pull quote *\/\r\n  .mta-quote-block {\r\n    background: rgba(184,150,12,0.04);\r\n    border-left: 3px solid var(--gold-light);\r\n    padding: 20px 24px;\r\n    margin-bottom: 28px;\r\n    position: relative;\r\n  }\r\n  .mta-quote-block::before {\r\n    content: '\\201C';\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 64px;\r\n    color: rgba(212,175,55,0.14);\r\n    position: absolute;\r\n    top: -4px; left: 14px;\r\n    line-height: 1;\r\n    pointer-events: none;\r\n  }\r\n  .mta-quote-text {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 17px;\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    line-height: 1.75;\r\n    color: var(--cream);\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* hashtags *\/\r\n  .mta-hashtags {\r\n    display: flex;\r\n    gap: 14px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 28px;\r\n  }\r\n  .mta-tag {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .14em;\r\n    color: var(--gold-light);\r\n  }\r\n\r\n  \/* stats \/ logos row *\/\r\n  .mta-bottom-row {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    padding-top: 24px;\r\n    border-top: 1px solid var(--border);\r\n    margin-top: auto;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .mta-stat-pill {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n    padding: 10px 20px;\r\n    border: 1px solid var(--border);\r\n    background: rgba(184,150,12,0.04);\r\n  }\r\n  .mta-stat-num {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 28px;\r\n    font-weight: 600;\r\n    color: var(--gold-light);\r\n    line-height: 1;\r\n  }\r\n  .mta-stat-label {\r\n    font-size: 10px;\r\n    font-weight: 500;\r\n    letter-spacing: .14em;\r\n    text-transform: uppercase;\r\n    color: var(--text-muted);\r\n  }\r\n\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .mta-card { grid-template-columns: 1fr; }\r\n    .mta-photo-pane { min-height: 380px; }\r\n    .mta-content-pane { border-left: none; border-top: 1px solid var(--border); padding: 36px 28px; }\r\n    .mta-meet, .mta-the-author { font-size: 36px; }\r\n    .mta-section { padding: 32px 16px 60px; }\r\n  }\r\n  @media (max-width: 560px) {\r\n    .mta-book-row { flex-direction: column; }\r\n    .mta-meet, .mta-the-author { font-size: 28px; }\r\n    .mta-content-pane { padding: 28px 20px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<section class=\"mta-section\">\r\n  <div class=\"mta-card\">\r\n\r\n    <!-- LEFT: photo -->\r\n    <div class=\"mta-photo-pane\">\r\n      <div class=\"mta-headline\">\r\n        <span class=\"mta-meet\">Meet the<\/span>\r\n        <span class=\"mta-the-author\">Author\r\n          <span class=\"mta-arrow\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n              <path d=\"M5 19L19 5M19 5H8M19 5V16\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <div class=\"deco-letter\">B<\/div>\r\n\r\n      <img decoding=\"async\" class=\"mta-photo\"\r\n           src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg\"\r\n           alt=\"Dr. Michael J. Barnes\">\r\n\r\n      <div class=\"mta-name-badge\">\r\n        <h3>Dr. Michael J. Barnes<\/h3>\r\n        <p>Superintendent \u00b7 Mayfield City Schools, Ohio<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT: content -->\r\n    <div class=\"mta-content-pane\">\r\n      <div class=\"mta-eyebrow\">Educator \u00b7 Superintendent \u00b7 Author<\/div>\r\n\r\n      <div class=\"mta-book-row\">\r\n        <img decoding=\"async\" class=\"mta-book-img\"\r\n             src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/BOOK-1-scaled.png\"\r\n             alt=\"The Modern Superintendent\">\r\n        <div class=\"mta-book-meta\">\r\n          <span class=\"mta-book-tag\">Strategy \u00b7 Education<\/span>\r\n          <h2 class=\"mta-book-title\">The Modern Superintendent: A Guide to Instructional Leadership<\/h2>\r\n          <a href=\"https:\/\/www.amazon.com\/dp\/B0D5PF1C28\" class=\"mta-book-cta\">Explore the Book<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <p class=\"mta-body\">\r\n        I'm excited to share the chapter <strong>\"Designing Learning for Student Agency\"<\/strong> exploring how Mayfield High School empowers students through agency and choice, blending research-driven strategy with practical tools that transform culture and accelerate student achievement.\r\n      <\/p>\r\n\r\n      <div class=\"mta-quote-block\">\r\n        <p class=\"mta-quote-text\">\r\n          \"Preparing students for their futures demands far more than incremental improvements to traditional schooling. It requires bold redesign rooted in student agency, grounded in design thinking, and aligned with the skills and mindsets that allow young people to navigate a world shaped increasingly by science, technology, engineering and mathematics.\"\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"mta-hashtags\">\r\n        <span class=\"mta-tag\">#21STCENTURY<\/span>\r\n        <span class=\"mta-tag\">#STEMCENTURY<\/span>\r\n        <span class=\"mta-tag\">#INSTRUCTIONALLEADERSHIP<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"mta-bottom-row\">\r\n        <div class=\"mta-stat-pill\">\r\n          <span class=\"mta-stat-num\">30+<\/span>\r\n          <span class=\"mta-stat-label\">Years in Education<\/span>\r\n        <\/div>\r\n        <div class=\"mta-stat-pill\">\r\n          <span class=\"mta-stat-num\">3<\/span>\r\n          <span class=\"mta-stat-label\">Published Books<\/span>\r\n        <\/div>\r\n        <div class=\"mta-stat-pill\">\r\n          <span class=\"mta-stat-num\">\u221e<\/span>\r\n          <span class=\"mta-stat-label\">Leaders Inspired<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fffb362 e-flex e-con-boxed e-con e-parent\" data-id=\"fffb362\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d346947 elementor-widget elementor-widget-html\" data-id=\"d346947\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root {\r\n    --gold: #B8960C;\r\n    --gold-light: #D4AF37;\r\n    --cream: #F5EFE0;\r\n    --ink: #0D0D0D;\r\n    --ink-mid: #1a1a1a;\r\n    --border: #2a2618;\r\n    --text-muted: #8a8070;\r\n  }\r\n  * { box-sizing: border-box; margin: 0; padding: 0; }\r\n  body { background: var(--ink); font-family: 'Outfit', sans-serif; }\r\n\r\n  .events-section {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 70px 40px 80px;\r\n  }\r\n\r\n  \/* \u2500\u2500 SECTION HEADER \u2500\u2500 *\/\r\n  .events-header {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n    margin-bottom: 48px;\r\n    animation: fadeUp .9s ease both;\r\n  }\r\n  .events-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .25em;\r\n    text-transform: uppercase;\r\n    color: var(--gold-light);\r\n    margin-bottom: 14px;\r\n  }\r\n  .events-eyebrow::before {\r\n    content: '';\r\n    display: block;\r\n    width: 28px; height: 1px;\r\n    background: var(--gold-light);\r\n  }\r\n  .events-title {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(32px, 4vw, 52px);\r\n    font-weight: 600;\r\n    line-height: 1.1;\r\n    color: var(--cream);\r\n  }\r\n  .events-title em {\r\n    display: block;\r\n    font-style: italic;\r\n    color: var(--gold-light);\r\n  }\r\n  .arrows {\r\n    display: flex;\r\n    gap: 8px;\r\n    padding-bottom: 6px;\r\n  }\r\n  .ev-arr {\r\n    width: 48px; height: 48px;\r\n    border: 1px solid var(--gold-light);\r\n    background: transparent;\r\n    display: flex; align-items: center; justify-content: center;\r\n    cursor: pointer;\r\n    transition: background .3s;\r\n    flex-shrink: 0;\r\n  }\r\n  .ev-arr:hover { background: var(--gold-light); }\r\n  .ev-arr::before {\r\n    content: '';\r\n    display: block;\r\n    width: 10px; height: 10px;\r\n    border-top: 2px solid var(--gold-light) !important;\r\n    border-right: 2px solid var(--gold-light);\r\n    transition: border-color .3s;\r\n  }\r\n  .ev-arr:hover::before { border-color: var(--ink); }\r\n  #evprev::before { transform: rotate(-135deg) translateX(2px); }\r\n  #evnext::before { transform: rotate(45deg) translateX(-2px); }\r\n\r\n  \/* \u2500\u2500 PROGRESS BAR \u2500\u2500 *\/\r\n  .ev-progress {\r\n    width: 100%; height: 2px;\r\n    background: var(--border);\r\n    margin-bottom: 0;\r\n  }\r\n  .ev-progress-fill {\r\n    height: 100%;\r\n    background: var(--gold-light);\r\n    width: 0%;\r\n    transition: width .08s linear;\r\n  }\r\n\r\n  \/* \u2500\u2500 SLIDER \u2500\u2500 *\/\r\n  .events-slider-wrap {\r\n    overflow: hidden;\r\n    animation: fadeUp .9s .1s ease both;\r\n  }\r\n  .events-track {\r\n    display: flex;\r\n    transition: transform .75s cubic-bezier(.77,0,.18,1);\r\n    will-change: transform;\r\n    gap: 2px;\r\n  }\r\n\r\n  \/* \u2500\u2500 VIDEO CARD \u2500\u2500 *\/\r\n  .ev-card {\r\n    flex: 0 0 calc(50% - 1px);\r\n    position: relative;\r\n    background: #0a0a08;\r\n    border: 1px solid var(--border);\r\n    border-top: 2px solid transparent;\r\n    overflow: hidden;\r\n    transition: border-top-color .4s;\r\n    cursor: pointer;\r\n  }\r\n  .ev-card:hover { border-top-color: var(--gold-light); }\r\n\r\n  \/* 16:9 ratio box *\/\r\n  .ev-ratio {\r\n    position: relative;\r\n    width: 100%;\r\n    padding-bottom: 56.25%;\r\n  }\r\n\r\n  .ev-ratio iframe {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%; height: 100%;\r\n    border: none;\r\n    display: block;\r\n  }\r\n\r\n  \/* thumbnail overlay *\/\r\n  .ev-thumb {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: opacity .35s;\r\n  }\r\n  .ev-thumb.hidden { opacity: 0; pointer-events: none; }\r\n\r\n  .ev-thumb-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-size: cover;\r\n    background-position: center;\r\n    filter: grayscale(20%) brightness(0.5);\r\n    transition: transform 6s ease, filter .4s;\r\n  }\r\n  .ev-card:hover .ev-thumb-bg {\r\n    transform: scale(1.04);\r\n    filter: grayscale(10%) brightness(0.6);\r\n  }\r\n\r\n  .ev-thumb-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(to top, rgba(13,13,13,0.7) 0%, transparent 60%);\r\n  }\r\n\r\n  \/* play button *\/\r\n  .ev-play {\r\n    position: relative;\r\n    z-index: 3;\r\n    width: 68px; height: 68px;\r\n    border-radius: 50%;\r\n    border: 2px solid var(--gold-light);\r\n    background: rgba(13,13,13,0.55);\r\n    display: flex; align-items: center; justify-content: center;\r\n    transition: background .3s, transform .3s;\r\n  }\r\n  .ev-play svg { width: 24px; height: 24px; margin-left: 5px; }\r\n  .ev-card:hover .ev-play {\r\n    background: var(--gold-light);\r\n    transform: scale(1.1);\r\n  }\r\n  .ev-card:hover .ev-play svg path { fill: var(--ink); }\r\n\r\n  \/* duration chip *\/\r\n  .ev-dur {\r\n    position: absolute;\r\n    bottom: 10px; right: 10px;\r\n    z-index: 4;\r\n    background: rgba(13,13,13,0.85);\r\n    border: 1px solid var(--border);\r\n    color: var(--cream);\r\n    font-size: 11px;\r\n    font-weight: 500;\r\n    padding: 3px 9px;\r\n    letter-spacing: .06em;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n  .ev-nav {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 22px 0 0;\r\n    animation: fadeUp .9s .2s ease both;\r\n  }\r\n  .ev-dots { display: flex; gap: 10px; align-items: center; }\r\n  .ev-dot {\r\n    height: 3px; border-radius: 2px;\r\n    background: var(--border);\r\n    cursor: pointer;\r\n    transition: background .4s, width .35s;\r\n    width: 20px;\r\n  }\r\n  .ev-dot.active { background: var(--gold-light); width: 40px; }\r\n  .ev-count {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 22px;\r\n    color: var(--text-muted);\r\n    letter-spacing: .06em;\r\n  }\r\n  .ev-count span { color: var(--gold-light); }\r\n\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(24px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 860px) {\r\n    .ev-card { flex: 0 0 100%; }\r\n    .events-section { padding: 48px 20px 60px; }\r\n    .events-header { flex-direction: column; align-items: flex-start; gap: 20px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"events-section\">\r\n\r\n  <div class=\"events-header\">\r\n    <div>\r\n      <div class=\"events-eyebrow\">Live \u00b7 On Stage \u00b7 On Screen<\/div>\r\n      <h2 class=\"events-title\">Author <em>Events & Talks<\/em><\/h2>\r\n    <\/div>\r\n    <div class=\"arrows\">\r\n      <button class=\"ev-arr\" id=\"evprev\" aria-label=\"Previous\"><\/button>\r\n      <button class=\"ev-arr\" id=\"evnext\" aria-label=\"Next\"><\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ev-progress\"><div class=\"ev-progress-fill\" id=\"evprog\"><\/div><\/div>\r\n\r\n  <div class=\"events-slider-wrap\">\r\n    <div class=\"events-track\" id=\"evtrack\">\r\n\r\n      <!-- VIDEO 1 -->\r\n      <div class=\"ev-card\" onclick=\"playVideo(this,'')\">\r\n        <div class=\"ev-ratio\">\r\n          <iframe src=\"\" allowfullscreen allow=\"autoplay\"><\/iframe>\r\n          <div class=\"ev-thumb\">\r\n            <div class=\"ev-thumb-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg')\"><\/div>\r\n            <div class=\"ev-thumb-overlay\"><\/div>\r\n            <div class=\"ev-play\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 4l14 8-14 8V4z\" fill=\"#D4AF37\"\/><\/svg><\/div>\r\n          <\/div>\r\n          <div class=\"ev-dur\">42:18<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- VIDEO 2 -->\r\n      <div class=\"ev-card\" onclick=\"playVideo(this,'')\">\r\n        <div class=\"ev-ratio\">\r\n          <iframe src=\"\" allowfullscreen allow=\"autoplay\"><\/iframe>\r\n          <div class=\"ev-thumb\">\r\n            <div class=\"ev-thumb-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg')\"><\/div>\r\n            <div class=\"ev-thumb-overlay\"><\/div>\r\n            <div class=\"ev-play\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 4l14 8-14 8V4z\" fill=\"#D4AF37\"\/><\/svg><\/div>\r\n          <\/div>\r\n          <div class=\"ev-dur\">28:45<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- VIDEO 3 -->\r\n      <div class=\"ev-card\" onclick=\"playVideo(this,'')\">\r\n        <div class=\"ev-ratio\">\r\n          <iframe src=\"\" allowfullscreen allow=\"autoplay\"><\/iframe>\r\n          <div class=\"ev-thumb\">\r\n            <div class=\"ev-thumb-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg')\"><\/div>\r\n            <div class=\"ev-thumb-overlay\"><\/div>\r\n            <div class=\"ev-play\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 4l14 8-14 8V4z\" fill=\"#D4AF37\"\/><\/svg><\/div>\r\n          <\/div>\r\n          <div class=\"ev-dur\">55:02<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- VIDEO 4 -->\r\n      <div class=\"ev-card\" onclick=\"playVideo(this,'')\">\r\n        <div class=\"ev-ratio\">\r\n          <iframe src=\"\" allowfullscreen allow=\"autoplay\"><\/iframe>\r\n          <div class=\"ev-thumb\">\r\n            <div class=\"ev-thumb-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg')\"><\/div>\r\n            <div class=\"ev-thumb-overlay\"><\/div>\r\n            <div class=\"ev-play\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 4l14 8-14 8V4z\" fill=\"#D4AF37\"\/><\/svg><\/div>\r\n          <\/div>\r\n          <div class=\"ev-dur\">36:50<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- VIDEO 5 -->\r\n      <div class=\"ev-card\" onclick=\"playVideo(this,'')\">\r\n        <div class=\"ev-ratio\">\r\n          <iframe src=\"\" allowfullscreen allow=\"autoplay\"><\/iframe>\r\n          <div class=\"ev-thumb\">\r\n            <div class=\"ev-thumb-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg')\"><\/div>\r\n            <div class=\"ev-thumb-overlay\"><\/div>\r\n            <div class=\"ev-play\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 4l14 8-14 8V4z\" fill=\"#D4AF37\"\/><\/svg><\/div>\r\n          <\/div>\r\n          <div class=\"ev-dur\">19:33<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- VIDEO 6 -->\r\n      <div class=\"ev-card\" onclick=\"playVideo(this,'')\">\r\n        <div class=\"ev-ratio\">\r\n          <iframe src=\"\" allowfullscreen allow=\"autoplay\"><\/iframe>\r\n          <div class=\"ev-thumb\">\r\n            <div class=\"ev-thumb-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/03\/Dr.MichaelJBarnes-scaled.jpg')\"><\/div>\r\n            <div class=\"ev-thumb-overlay\"><\/div>\r\n            <div class=\"ev-play\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 4l14 8-14 8V4z\" fill=\"#D4AF37\"\/><\/svg><\/div>\r\n          <\/div>\r\n          <div class=\"ev-dur\">48:11<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ev-nav\">\r\n    <div class=\"ev-dots\" id=\"evdots\"><\/div>\r\n    <div class=\"ev-count\"><span id=\"evcur\">01<\/span> \/ <span id=\"evtot\">05<\/span><\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n  var track   = document.getElementById('evtrack');\r\n  var prog    = document.getElementById('evprog');\r\n  var dotsEl  = document.getElementById('evdots');\r\n  var curEl   = document.getElementById('evcur');\r\n  var totEl   = document.getElementById('evtot');\r\n  var cards   = track.querySelectorAll('.ev-card');\r\n  var total   = cards.length;\r\n  var cur     = 0;\r\n  var paused  = false;\r\n  var autoT   = null;\r\n  var progT   = null;\r\n  var progVal = 0;\r\n  var INTERVAL = 5000;\r\n  var STEP = 100 \/ (INTERVAL \/ 80);\r\n\r\n  function vis() { return window.innerWidth <= 860 ? 1 : 2; }\r\n  function maxIdx() { return total - vis(); }\r\n  function cardW() { return cards[0].offsetWidth + 2; }\r\n\r\n  function goTo(idx) {\r\n    cur = Math.max(0, Math.min(idx, maxIdx()));\r\n    track.style.transform = 'translateX(-' + (cur * cardW()) + 'px)';\r\n    syncDots();\r\n    curEl.textContent = (cur + 1).toString().padStart(2, '0');\r\n    resetProg();\r\n  }\r\n\r\n  function nextSlide() { goTo(cur >= maxIdx() ? 0 : cur + 1); }\r\n  function prevSlide() { goTo(cur <= 0 ? maxIdx() : cur - 1); }\r\n\r\n  function buildDots() {\r\n    dotsEl.innerHTML = '';\r\n    var m = maxIdx();\r\n    totEl.textContent = (m + 1).toString().padStart(2, '0');\r\n    for (var i = 0; i <= m; i++) {\r\n      (function(i){\r\n        var d = document.createElement('div');\r\n        d.className = 'ev-dot' + (i === cur ? ' active' : '');\r\n        d.onclick = function() { goTo(i); };\r\n        dotsEl.appendChild(d);\r\n      })(i);\r\n    }\r\n  }\r\n\r\n  function syncDots() {\r\n    dotsEl.querySelectorAll('.ev-dot').forEach(function(d,i){ d.classList.toggle('active', i === cur); });\r\n  }\r\n\r\n  function startAuto() {\r\n    clearInterval(autoT);\r\n    autoT = setInterval(function(){ if (!paused) nextSlide(); }, INTERVAL);\r\n  }\r\n\r\n  function resetProg() {\r\n    clearInterval(progT);\r\n    progVal = 0;\r\n    prog.style.transition = 'none';\r\n    prog.style.width = '0%';\r\n    if (!paused) startProg();\r\n  }\r\n\r\n  function startProg() {\r\n    clearInterval(progT);\r\n    progT = setInterval(function(){\r\n      if (paused) return;\r\n      progVal += STEP;\r\n      prog.style.transition = 'width .08s linear';\r\n      prog.style.width = Math.min(progVal, 100) + '%';\r\n    }, 80);\r\n  }\r\n\r\n  function playVideo(card, src) {\r\n    var iframe = card.querySelector('iframe');\r\n    var thumb  = card.querySelector('.ev-thumb');\r\n    iframe.src = src;\r\n    thumb.classList.add('hidden');\r\n    paused = true;\r\n    clearInterval(progT);\r\n  }\r\n\r\n  cards.forEach(function(c){\r\n    c.addEventListener('mouseenter', function(){ paused = true; });\r\n    c.addEventListener('mouseleave', function(){ paused = false; startProg(); });\r\n  });\r\n\r\n  document.getElementById('evprev').addEventListener('click', prevSlide);\r\n  document.getElementById('evnext').addEventListener('click', nextSlide);\r\n\r\n  var dragX = null;\r\n  track.addEventListener('mousedown', function(e){ dragX = e.clientX; });\r\n  track.addEventListener('mouseup', function(e){ if(dragX!==null){ var dx=e.clientX-dragX; if(dx<-50)nextSlide(); else if(dx>50)prevSlide(); dragX=null; } });\r\n  track.addEventListener('touchstart', function(e){ dragX=e.touches[0].clientX; },{passive:true});\r\n  track.addEventListener('touchend', function(e){ var dx=e.changedTouches[0].clientX-dragX; if(dx<-50)nextSlide(); else if(dx>50)prevSlide(); dragX=null; });\r\n\r\n  window.addEventListener('resize', function(){ buildDots(); goTo(Math.min(cur, maxIdx())); });\r\n\r\n  buildDots();\r\n  startAuto();\r\n  startProg();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cec7e5e e-flex e-con-boxed e-con e-parent\" data-id=\"cec7e5e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6fd3387 elementor-widget elementor-widget-html\" data-id=\"6fd3387\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root {\r\n    --gold: #B8960C;\r\n    --gold-light: #D4AF37;\r\n    --cream: #F5EFE0;\r\n    --ink: #0D0D0D;\r\n    --ink-mid: #1a1a1a;\r\n    --ink-soft: #2e2e2e;\r\n    --border: #2a2618;\r\n    --text-muted: #8a8070;\r\n  }\r\n  * { box-sizing: border-box; margin: 0; padding: 0; }\r\n  body { background: var(--ink); font-family: 'Outfit', sans-serif; }\r\n\r\n  \/* noise overlay *\/\r\n  body::before {\r\n    content: '';\r\n    position: fixed; inset: 0;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'\/%3E%3C\/svg%3E\");\r\n    pointer-events: none; z-index: 999; opacity: .5;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     SECTION WRAPPER\r\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  .testi-section {\r\n    width: 100%;\r\n    padding: 100px 0 110px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    background: var(--ink);\r\n  }\r\n\r\n  \/* large decorative quote behind everything *\/\r\n  .testi-section::before {\r\n    content: '\\201C';\r\n    position: absolute;\r\n    top: -60px; left: 50%;\r\n    transform: translateX(-50%);\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 500px;\r\n    font-weight: 700;\r\n    color: rgba(184,150,12,0.04);\r\n    line-height: 1;\r\n    pointer-events: none;\r\n    user-select: none;\r\n    z-index: 0;\r\n  }\r\n\r\n  \/* top + bottom border lines *\/\r\n  .testi-section::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0;\r\n    height: 1px;\r\n    background: linear-gradient(to right, transparent, var(--border), var(--gold-light), var(--border), transparent);\r\n  }\r\n\r\n  .testi-bottom-line {\r\n    position: absolute;\r\n    bottom: 0; left: 0; right: 0;\r\n    height: 1px;\r\n    background: linear-gradient(to right, transparent, var(--border), var(--gold-light), var(--border), transparent);\r\n  }\r\n\r\n  \/* \u2500\u2500 HEADER \u2500\u2500 *\/\r\n  .testi-header {\r\n    text-align: center;\r\n    margin-bottom: 64px;\r\n    position: relative;\r\n    z-index: 1;\r\n    animation: fadeUp .9s ease both;\r\n  }\r\n\r\n  .testi-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .28em;\r\n    text-transform: uppercase;\r\n    color: var(--gold-light);\r\n    margin-bottom: 18px;\r\n  }\r\n  .testi-eyebrow::before,\r\n  .testi-eyebrow::after {\r\n    content: '';\r\n    display: block;\r\n    width: 40px; height: 1px;\r\n    background: var(--gold-light);\r\n  }\r\n\r\n  .testi-title {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(34px, 4vw, 54px);\r\n    font-weight: 600;\r\n    line-height: 1.1;\r\n    color: var(--cream);\r\n  }\r\n  .testi-title em {\r\n    font-style: italic;\r\n    color: var(--gold-light);\r\n  }\r\n\r\n  \/* \u2500\u2500 SLIDER WRAP \u2500\u2500 *\/\r\n  .testi-slider-outer {\r\n    position: relative;\r\n    z-index: 1;\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n    padding: 0 40px;\r\n    animation: fadeUp .9s .1s ease both;\r\n  }\r\n\r\n  \/* progress bar *\/\r\n  .testi-progress {\r\n    width: 100%; height: 1px;\r\n    background: var(--border);\r\n    margin-bottom: 56px;\r\n    position: relative;\r\n  }\r\n  .testi-progress-fill {\r\n    height: 100%;\r\n    background: var(--gold-light);\r\n    width: 0%;\r\n    transition: width .08s linear;\r\n  }\r\n\r\n  \/* \u2500\u2500 SLIDES \u2500\u2500 *\/\r\n  .testi-track-wrap { overflow: hidden; }\r\n  .testi-track {\r\n    display: flex;\r\n    transition: transform .75s cubic-bezier(.77,0,.18,1);\r\n    will-change: transform;\r\n  }\r\n\r\n  .testi-slide {\r\n    flex: 0 0 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    padding: 0 20px;\r\n  }\r\n\r\n  \/* opening quote mark *\/\r\n  .testi-quote-mark {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 80px;\r\n    font-weight: 700;\r\n    color: var(--gold-light);\r\n    line-height: .6;\r\n    margin-bottom: 28px;\r\n    opacity: .7;\r\n  }\r\n\r\n  \/* star row *\/\r\n  .testi-stars {\r\n    display: flex;\r\n    gap: 6px;\r\n    margin-bottom: 28px;\r\n  }\r\n  .testi-star {\r\n    width: 16px; height: 16px;\r\n    position: relative;\r\n  }\r\n  .testi-star svg { width: 16px; height: 16px; }\r\n\r\n  \/* quote text *\/\r\n  .testi-text {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(20px, 2.4vw, 28px);\r\n    font-weight: 400;\r\n    font-style: italic;\r\n    line-height: 1.7;\r\n    color: var(--cream);\r\n    max-width: 780px;\r\n    margin-bottom: 44px;\r\n  }\r\n\r\n  \/* divider *\/\r\n  .testi-divider {\r\n    width: 60px; height: 1px;\r\n    background: linear-gradient(to right, transparent, var(--gold-light), transparent);\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  \/* avatar + name block *\/\r\n  .testi-author {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .testi-avatar {\r\n    width: 52px; height: 52px;\r\n    border-radius: 50%;\r\n    border: 2px solid var(--gold-light);\r\n    background: var(--ink-mid);\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 22px;\r\n    font-weight: 600;\r\n    color: var(--gold-light);\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n    flex-shrink: 0;\r\n  }\r\n  .testi-avatar img {\r\n    width: 100%; height: 100%;\r\n    object-fit: cover;\r\n  }\r\n\r\n  .testi-name {\r\n    font-family: 'Outfit', sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    letter-spacing: .1em;\r\n    text-transform: uppercase;\r\n    color: var(--cream);\r\n  }\r\n\r\n  .testi-role {\r\n    font-size: 12px;\r\n    font-weight: 300;\r\n    letter-spacing: .08em;\r\n    color: var(--gold-light);\r\n  }\r\n\r\n  \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n  .testi-nav {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 24px;\r\n    margin-top: 52px;\r\n    position: relative;\r\n    z-index: 1;\r\n    animation: fadeUp .9s .2s ease both;\r\n  }\r\n\r\n  .t-arr {\r\n    width: 48px; height: 48px;\r\n    border: 1px solid var(--gold-light);\r\n    background: transparent;\r\n    display: flex; align-items: center; justify-content: center;\r\n    cursor: pointer;\r\n    transition: background .3s;\r\n    flex-shrink: 0;\r\n  }\r\n  .t-arr:hover { background: var(--gold-light); }\r\n  .t-arr::before {\r\n    content: '';\r\n    display: block;\r\n    width: 10px; height: 10px;\r\n    border-top: 2px solid var(--gold-light);\r\n    border-right: 2px solid var(--gold-light);\r\n    transition: border-color .3s;\r\n  }\r\n  .t-arr:hover::before { border-color: var(--ink); }\r\n  #tprev::before { transform: rotate(-135deg) translateX(2px); }\r\n  #tnext::before { transform: rotate(45deg) translateX(-2px); }\r\n\r\n  .testi-dots { display: flex; gap: 10px; align-items: center; }\r\n  .t-dot {\r\n    height: 3px; border-radius: 2px;\r\n    background: var(--border);\r\n    cursor: pointer;\r\n    transition: background .4s, width .35s;\r\n    width: 20px;\r\n  }\r\n  .t-dot.active { background: var(--gold-light); width: 40px; }\r\n\r\n  \/* \u2500\u2500 LOGOS STRIP \u2500\u2500 *\/\r\n  .testi-logos {\r\n    margin-top: 80px;\r\n    padding: 40px 60px;\r\n    border-top: 1px solid var(--border);\r\n    border-bottom: 1px solid var(--border);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 60px;\r\n    flex-wrap: wrap;\r\n    position: relative;\r\n    z-index: 1;\r\n    animation: fadeUp .9s .3s ease both;\r\n  }\r\n\r\n  .testi-logo-item {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    letter-spacing: .12em;\r\n    text-transform: uppercase;\r\n    color: var(--text-muted);\r\n    transition: color .3s;\r\n    white-space: nowrap;\r\n  }\r\n  .testi-logo-item:hover { color: var(--gold-light); }\r\n  .testi-logo-sep {\r\n    width: 4px; height: 4px;\r\n    border-radius: 50%;\r\n    background: var(--border);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(28px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .testi-section { padding: 72px 0 80px; }\r\n    .testi-slider-outer { padding: 0 20px; }\r\n    .testi-text { font-size: 18px; }\r\n    .testi-logos { gap: 32px; padding: 32px 32px; }\r\n    .testi-logo-sep { display: none; }\r\n  }\r\n  @media (max-width: 480px) {\r\n    .testi-text { font-size: 16px; }\r\n    .testi-title { font-size: 28px; }\r\n    .testi-logos { flex-direction: column; gap: 20px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"testi-section\">\r\n  <div class=\"testi-bottom-line\"><\/div>\r\n\r\n  <!-- HEADER -->\r\n  <div class=\"testi-header\">\r\n    <div class=\"testi-eyebrow\">Testimonials<\/div>\r\n    <h2 class=\"testi-title\">What <em>Clients Say<\/em><\/h2>\r\n  <\/div>\r\n\r\n  <!-- SLIDER -->\r\n  <div class=\"testi-slider-outer\">\r\n    <div class=\"testi-progress\"><div class=\"testi-progress-fill\" id=\"tprog\"><\/div><\/div>\r\n\r\n    <div class=\"testi-track-wrap\">\r\n      <div class=\"testi-track\" id=\"ttrack\">\r\n\r\n        <!-- SLIDE 1 -->\r\n        <div class=\"testi-slide\">\r\n          <div class=\"testi-quote-mark\">&ldquo;<\/div>\r\n          <div class=\"testi-stars\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n          <\/div>\r\n          <p class=\"testi-text\">Dr. Barnes, thank you again for the great session. You were so accurate and dead on with your points about instructional leadership, straight from the classroom to the superintendent's office. YOU GET IT!! Most people do not. Great meeting you. See you next year hopefully!<\/p>\r\n          <div class=\"testi-divider\"><\/div>\r\n          <div class=\"testi-author\">\r\n            <div class=\"testi-avatar\">C<\/div>\r\n            <span class=\"testi-name\">Corina<\/span>\r\n            <span class=\"testi-role\">Grade 5 Teacher<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 2 -->\r\n        <div class=\"testi-slide\">\r\n          <div class=\"testi-quote-mark\">&ldquo;<\/div>\r\n          <div class=\"testi-stars\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n          <\/div>\r\n          <p class=\"testi-text\">The Modern Superintendent completely reshaped how I think about leading my district. Dr. Barnes brings a rare combination of vision and practicality that I have not found in any other leadership resource. Transformational in every sense of the word.<\/p>\r\n          <div class=\"testi-divider\"><\/div>\r\n          <div class=\"testi-author\">\r\n            <div class=\"testi-avatar\">M<\/div>\r\n            <span class=\"testi-name\">Marcus T.<\/span>\r\n            <span class=\"testi-role\">District Superintendent, Ohio<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 3 -->\r\n        <div class=\"testi-slide\">\r\n          <div class=\"testi-quote-mark\">&ldquo;<\/div>\r\n          <div class=\"testi-stars\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n          <\/div>\r\n          <p class=\"testi-text\">Winning is not just a book it is a philosophy. I gave copies to every principal in my district. The lessons on life, learning, and leadership are timeless and immediately applicable to anyone who leads people and genuinely cares about outcomes.<\/p>\r\n          <div class=\"testi-divider\"><\/div>\r\n          <div class=\"testi-author\">\r\n            <div class=\"testi-avatar\">R<\/div>\r\n            <span class=\"testi-name\">Rachel M.<\/span>\r\n            <span class=\"testi-role\">Principal, Cleveland City Schools<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 4 -->\r\n        <div class=\"testi-slide\">\r\n          <div class=\"testi-quote-mark\">&ldquo;<\/div>\r\n          <div class=\"testi-stars\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n          <\/div>\r\n          <p class=\"testi-text\">Building Literacy Together gave our community a shared language and a clear path forward. Dr. Barnes speaks to educators, parents, and leaders all at once and every single page rings true. This is the kind of book that changes how a community thinks about its children.<\/p>\r\n          <div class=\"testi-divider\"><\/div>\r\n          <div class=\"testi-author\">\r\n            <div class=\"testi-avatar\">D<\/div>\r\n            <span class=\"testi-name\">Dr. Diana W.<\/span>\r\n            <span class=\"testi-role\">Curriculum Director, Mayfield<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 5 -->\r\n        <div class=\"testi-slide\">\r\n          <div class=\"testi-quote-mark\">&ldquo;<\/div>\r\n          <div class=\"testi-stars\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" fill=\"#D4AF37\"\/><\/svg>\r\n          <\/div>\r\n          <p class=\"testi-text\">Dr. Barnes' keynote at our AASA conference was the highlight of the entire event. His command of the room, the clarity of his message, and his ability to connect research to real school challenges left every leader in the audience inspired and ready to act.<\/p>\r\n          <div class=\"testi-divider\"><\/div>\r\n          <div class=\"testi-author\">\r\n            <div class=\"testi-avatar\">J<\/div>\r\n            <span class=\"testi-name\">James H.<\/span>\r\n            <span class=\"testi-role\">AASA Conference Chair<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- NAV -->\r\n  <div class=\"testi-nav\">\r\n    <button class=\"t-arr\" id=\"tprev\" aria-label=\"Previous\"><\/button>\r\n    <div class=\"testi-dots\" id=\"tdots\"><\/div>\r\n    <button class=\"t-arr\" id=\"tnext\" aria-label=\"Next\"><\/button>\r\n  <\/div>\r\n\r\n  <!-- LOGOS STRIP -->\r\n  <div class=\"testi-logos\">\r\n    <span class=\"testi-logo-item\">AASA<\/span>\r\n    <div class=\"testi-logo-sep\"><\/div>\r\n    <span class=\"testi-logo-item\">Mayfield City Schools<\/span>\r\n    <div class=\"testi-logo-sep\"><\/div>\r\n    <span class=\"testi-logo-item\">EdLeader21<\/span>\r\n    <div class=\"testi-logo-sep\"><\/div>\r\n    <span class=\"testi-logo-item\">ILA<\/span>\r\n    <div class=\"testi-logo-sep\"><\/div>\r\n    <span class=\"testi-logo-item\">Education Week<\/span>\r\n    <div class=\"testi-logo-sep\"><\/div>\r\n    <span class=\"testi-logo-item\">21st Century Ed<\/span>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n  var track   = document.getElementById('ttrack');\r\n  var prog    = document.getElementById('tprog');\r\n  var dotsEl  = document.getElementById('tdots');\r\n  var slides  = track.querySelectorAll('.testi-slide');\r\n  var total   = slides.length;\r\n  var cur     = 0;\r\n  var paused  = false;\r\n  var autoT   = null;\r\n  var progT   = null;\r\n  var progVal = 0;\r\n  var INTERVAL = 6000;\r\n  var STEP = 100 \/ (INTERVAL \/ 80);\r\n\r\n  function goTo(idx) {\r\n    cur = (idx + total) % total;\r\n    track.style.transform = 'translateX(-' + (cur * 100) + '%)';\r\n    syncDots();\r\n    resetProg();\r\n  }\r\n\r\n  function nextSlide() { goTo(cur + 1); }\r\n  function prevSlide() { goTo(cur - 1); }\r\n\r\n  function buildDots() {\r\n    dotsEl.innerHTML = '';\r\n    for (var i = 0; i < total; i++) {\r\n      (function(i){\r\n        var d = document.createElement('div');\r\n        d.className = 't-dot' + (i === cur ? ' active' : '');\r\n        d.onclick = function() { goTo(i); };\r\n        dotsEl.appendChild(d);\r\n      })(i);\r\n    }\r\n  }\r\n\r\n  function syncDots() {\r\n    dotsEl.querySelectorAll('.t-dot').forEach(function(d, i){ d.classList.toggle('active', i === cur); });\r\n  }\r\n\r\n  function startAuto() {\r\n    clearInterval(autoT);\r\n    autoT = setInterval(function(){ if (!paused) nextSlide(); }, INTERVAL);\r\n  }\r\n\r\n  function resetProg() {\r\n    clearInterval(progT);\r\n    progVal = 0;\r\n    prog.style.transition = 'none';\r\n    prog.style.width = '0%';\r\n    if (!paused) startProg();\r\n  }\r\n\r\n  function startProg() {\r\n    clearInterval(progT);\r\n    progT = setInterval(function(){\r\n      if (paused) return;\r\n      progVal += STEP;\r\n      prog.style.transition = 'width .08s linear';\r\n      prog.style.width = Math.min(progVal, 100) + '%';\r\n    }, 80);\r\n  }\r\n\r\n  document.querySelector('.testi-slider-outer').addEventListener('mouseenter', function(){ paused = true; });\r\n  document.querySelector('.testi-slider-outer').addEventListener('mouseleave', function(){ paused = false; startProg(); });\r\n\r\n  document.getElementById('tprev').addEventListener('click', prevSlide);\r\n  document.getElementById('tnext').addEventListener('click', nextSlide);\r\n\r\n  \/* touch swipe *\/\r\n  var dragX = null;\r\n  track.addEventListener('touchstart', function(e){ dragX = e.touches[0].clientX; }, {passive:true});\r\n  track.addEventListener('touchend', function(e){ var dx = e.changedTouches[0].clientX - dragX; if (dx < -50) nextSlide(); else if (dx > 50) prevSlide(); dragX = null; });\r\n\r\n  buildDots();\r\n  startAuto();\r\n  startProg();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0a5861b e-con-full e-flex e-con e-parent\" data-id=\"0a5861b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b802b40 elementor-widget elementor-widget-html\" data-id=\"b802b40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\nbody {\r\n  background: #080706;\r\n  font-family: 'Jost', sans-serif;\r\n  color: #EDE5D0;\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* grain *\/\r\nbody::after {\r\n  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='saturate' values='0'\/%3E%3C\/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CTA SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-section {\r\n  position: relative;\r\n  overflow: hidden;\r\n  background: #0E0D0A;\r\n  border-top: 1px solid rgba(201,168,76,.15);\r\n  border-bottom: 1px solid rgba(201,168,76,.15);\r\n}\r\n\r\n\/* \u2500\u2500 background: diagonal gold lines \u2500\u2500 *\/\r\n.cta-section::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background-image:\r\n    repeating-linear-gradient(\r\n      -55deg,\r\n      transparent,\r\n      transparent 60px,\r\n      rgba(201,168,76,.028) 60px,\r\n      rgba(201,168,76,.028) 61px\r\n    );\r\n  pointer-events: none; z-index: 0;\r\n}\r\n\r\n\/* \u2500\u2500 large ambient glow center \u2500\u2500 *\/\r\n.cta-section::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 50%; left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 900px; height: 500px;\r\n  background: radial-gradient(ellipse at center, rgba(201,168,76,.07) 0%, transparent 65%);\r\n  pointer-events: none; z-index: 0;\r\n}\r\n\r\n\/* \u2500\u2500 inner \u2500\u2500 *\/\r\n.cta-inner {\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n  padding: 100px 60px;\r\n  position: relative; z-index: 1;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 80px;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   LEFT \u2014 TEXT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-left {}\r\n\r\n.cta-overline {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 14px;\r\n  margin-bottom: 24px;\r\n  opacity: 0;\r\n  animation: up .9s .05s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n.cta-overline-rule {\r\n  width: 36px; height: 1px;\r\n  background: linear-gradient(90deg, #C9A84C, transparent);\r\n}\r\n.cta-overline-text {\r\n  font-size: 10px; font-weight: 600;\r\n  letter-spacing: .32em; text-transform: uppercase;\r\n  color: #C9A84C;\r\n}\r\n\r\n.cta-heading {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: clamp(40px, 5vw, 64px);\r\n  font-weight: 500;\r\n  line-height: 1.05;\r\n  letter-spacing: -.015em;\r\n  color: #EDE5D0;\r\n  margin-bottom: 28px;\r\n  opacity: 0;\r\n  animation: up .9s .12s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n.cta-heading em {\r\n  font-style: italic;\r\n  color: #E2C46A;\r\n  font-weight: 400;\r\n}\r\n\r\n.cta-body {\r\n  font-family: 'Crimson Pro', serif;\r\n  font-size: 19px;\r\n  font-weight: 300;\r\n  line-height: 1.85;\r\n  color: #fff;\r\n  margin-bottom: 48px;\r\n  max-width: 480px;\r\n  opacity: 0;\r\n  animation: up .9s .2s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n\r\n\/* \u2500\u2500 button group \u2500\u2500 *\/\r\n.cta-btns {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n  flex-wrap: wrap;\r\n  opacity: 0;\r\n  animation: up .9s .28s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n\r\n\/* Primary gold button *\/\r\n.btn-primary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 17px 44px;\r\n  background: #C9A84C;\r\n  color: #ffffff;\r\n  font-family: 'Jost', sans-serif;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: .22em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  border: 1px solid #C9A84C;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: color .45s;\r\n}\r\n.btn-primary::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: #E2C46A;\r\n  transform: scaleX(0);\r\n  transform-origin: right;\r\n  transition: transform .48s cubic-bezier(.77,0,.18,1);\r\n}\r\n.btn-primary:hover::before { transform: scaleX(1); }\r\n.btn-primary span { position: relative; z-index: 1; }\r\n.btn-primary .btn-arrow {\r\n  position: relative; z-index: 1;\r\n  display: flex; align-items: center;\r\n  transition: transform .35s;\r\n}\r\n.btn-primary:hover .btn-arrow { transform: translateX(5px); }\r\n\r\n\/* Ghost \/ outline button *\/\r\n.btn-ghost {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 17px 44px;\r\n  background: transparent;\r\n  color: #C9A84C;\r\n  font-family: 'Jost', sans-serif;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: .22em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  border: 1px solid rgba(201,168,76,.3);\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: color .45s, border-color .45s;\r\n}\r\n.btn-ghost::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: #C9A84C;\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform .48s cubic-bezier(.77,0,.18,1);\r\n}\r\n.btn-ghost:hover { color: #ffffff; border-color: #C9A84C; }\r\n.btn-ghost:hover::before { transform: scaleX(1); }\r\n.btn-ghost span { position: relative; z-index: 1; }\r\n.btn-ghost .btn-arrow {\r\n  position: relative; z-index: 1;\r\n  display: flex; align-items: center;\r\n  transition: transform .35s;\r\n}\r\n.btn-ghost:hover .btn-arrow { transform: translateX(5px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RIGHT \u2014 CARDS STACK\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-right {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 3px;\r\n  opacity: 0;\r\n  animation: up .9s .18s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n\r\n.cta-card {\r\n  background: #141210;\r\n  border: 1px solid rgba(201,168,76,.08);\r\n  padding: 28px 36px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 28px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  cursor: default;\r\n  transition: border-color .5s, background .5s;\r\n}\r\n.cta-card::before {\r\n  content: '';\r\n  position: absolute; inset: 0; pointer-events: none;\r\n  background: radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), rgba(201,168,76,.065), transparent 65%);\r\n  opacity: 0; transition: opacity .5s;\r\n}\r\n.cta-card:hover::before { opacity: 1; }\r\n.cta-card:hover { border-color: rgba(201,168,76,.2); background: #1a1810; }\r\n\/* left gold bar *\/\r\n.cta-card::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; top: 0; bottom: 0; width: 2px;\r\n  background: linear-gradient(180deg, transparent, #C9A84C, transparent);\r\n  transform: scaleY(0);\r\n  transition: transform .55s cubic-bezier(.77,0,.18,1);\r\n}\r\n.cta-card:hover::after { transform: scaleY(1); }\r\n\r\n\/* icon box *\/\r\n.card-icon {\r\n  width: 52px; height: 52px;\r\n  border: 1px solid rgba(201,168,76,.2);\r\n  background: rgba(201,168,76,.05);\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background .4s, border-color .4s;\r\n}\r\n.cta-card:hover .card-icon {\r\n  background: rgba(201,168,76,.12);\r\n  border-color: rgba(201,168,76,.4);\r\n}\r\n.card-icon svg { transition: stroke .4s; }\r\n\r\n.card-text { flex: 1; }\r\n.card-title {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: 16px; font-weight: 500;\r\n  color: #EDE5D0; margin-bottom: 5px;\r\n  transition: color .4s;\r\n}\r\n.cta-card:hover .card-title { color: #E2C46A; }\r\n.card-desc {\r\n  font-size: 14px; font-weight: 300;\r\n  color: #fff; line-height: 1.6;\r\n  transition: color .4s;\r\n}\r\n.cta-card:hover .card-desc { color: #9a9080; }\r\n\r\n.card-arrow {\r\n  flex-shrink: 0;\r\n  width: 36px; height: 36px;\r\n  border: 1px solid rgba(201,168,76,.15);\r\n  display: flex; align-items: center; justify-content: center;\r\n  transition: background .4s, border-color .4s, transform .4s;\r\n}\r\n.cta-card:hover .card-arrow {\r\n  background: #C9A84C;\r\n  border-color: #C9A84C;\r\n  transform: rotate(45deg);\r\n}\r\n.card-arrow polyline {\r\n  stroke: #C9A84C;\r\n  fill: none; stroke-width: 1.8;\r\n  stroke-linecap: round; stroke-linejoin: round;\r\n  transition: stroke .4s;\r\n}\r\n.cta-card:hover .card-arrow polyline { stroke: #ffffff; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   DIVIDER STRIP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-divider {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  border-top: 1px solid rgba(201,168,76,.12);\r\n  border-bottom: 1px solid rgba(201,168,76,.12);\r\n  background: #0a0908;\r\n  opacity: 0;\r\n  animation: up .9s .36s cubic-bezier(.22,1,.36,1) forwards;\r\n  position: relative; z-index: 1;\r\n}\r\n\r\n.div-cell {\r\n  padding: 32px 40px;\r\n  display: flex; align-items: center; gap: 16px;\r\n  position: relative;\r\n  transition: background .4s;\r\n}\r\n.div-cell:not(:last-child)::after {\r\n  content: ''; position: absolute;\r\n  top: 20%; right: 0; bottom: 20%;\r\n  width: 1px; background: rgba(201,168,76,.12);\r\n}\r\n.div-cell:hover { background: #0e0d0a; }\r\n\r\n.div-num {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: 40px; font-weight: 500;\r\n  color: #C9A84C; line-height: 1;\r\n  letter-spacing: -.02em; flex-shrink: 0;\r\n}\r\n.div-info {}\r\n.div-label {\r\n  font-size: 10px; font-weight: 600;\r\n  letter-spacing: .2em; text-transform: uppercase;\r\n  color: #EDE5D0; display: block; margin-bottom: 3px;\r\n}\r\n.div-sublabel {\r\n  font-size: 17px; font-weight: 300;\r\n  color: #fff;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   KEYFRAMES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@keyframes up {\r\n  from { opacity: 0; transform: translateY(28px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 960px) {\r\n  .cta-inner { grid-template-columns: 1fr; gap: 48px; }\r\n  .cta-divider { grid-template-columns: 1fr; }\r\n  .div-cell:not(:last-child)::after { display: none; }\r\n  .cta-inner { padding: 72px 32px; }\r\n}\r\n@media (max-width: 560px) {\r\n  .cta-btns { flex-direction: column; align-items: flex-start; }\r\n  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }\r\n  .cta-inner { padding: 56px 24px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CTA SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"cta-section\">\r\n  <div class=\"cta-inner\">\r\n\r\n    <!-- LEFT -->\r\n    <div class=\"cta-left\">\r\n      <div class=\"cta-overline\">\r\n        <div class=\"cta-overline-rule\"><\/div>\r\n        <span class=\"cta-overline-text\">Take the Next Step<\/span>\r\n      <\/div>\r\n\r\n      <h2 class=\"cta-heading\">\r\n        Let's Build <em>Something<\/em><br>Extraordinary Together\r\n      <\/h2>\r\n\r\n      <p class=\"cta-body\">\r\n        Whether you're looking to book Dr. Michael J. Barnes for a keynote, purchase his books, or connect with the Barnes Foundation every conversation starts with a single step.\r\n      <\/p>\r\n\r\n     <div class=\"cta-btns\">\r\n        <a href=\"https:\/\/demowebdesign.live\/michael-barnes\/contact\/\" class=\"btn-primary\">\r\n          <span>Book Dr. Barnes<\/span>\r\n          <span class=\"btn-arrow\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"1.8\" stroke-linecap=\"round\">\r\n              <path d=\"M3 13L13 3M13 3H6M13 3v7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/michael-barnes\/shop\/\" class=\"btn-ghost\">\r\n          <span>Explore Books<\/span>\r\n          <span class=\"btn-arrow\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.8\" stroke-linecap=\"round\" id=\"ghost-arrow-svg\">\r\n              <path d=\"M3 13L13 3M13 3H6M13 3v7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT \u2014 action cards -->\r\n    <div class=\"cta-right\">\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\r\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">Book a Speaking Engagement<\/div>\r\n          <div class=\"card-desc\">Keynotes, leadership summits, district events & more<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/>\r\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">Order Dr. Barnes' Books<\/div>\r\n          <div class=\"card-desc\">Winning & The Modern Superintendent available now<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\r\n            <polyline points=\"9,22 9,12 15,12 15,22\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">The Barnes Foundation<\/div>\r\n          <div class=\"card-desc\">Support community & educational transformation programs<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\r\n            <polyline points=\"22,6 12,13 2,6\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">Get in Touch<\/div>\r\n          <div class=\"card-desc\">Media inquiries, partnerships & general contact<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div><!-- \/cta-right -->\r\n  <\/div><!-- \/cta-inner -->\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     DIVIDER STATS STRIP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<!--<div class=\"cta-divider\">-->\r\n<!--  <div class=\"div-cell\">-->\r\n<!--    <div class=\"div-num\">30+<\/div>-->\r\n<!--    <div class=\"div-info\">-->\r\n<!--      <span class=\"div-label\">Years Leading<\/span>-->\r\n<!--      <span class=\"div-sublabel\">In public education<\/span>-->\r\n<!--    <\/div>-->\r\n<!--  <\/div>-->\r\n<!--  <div class=\"div-cell\">-->\r\n<!--    <div class=\"div-num\">2<\/div>-->\r\n<!--    <div class=\"div-info\">-->\r\n<!--      <span class=\"div-label\">Published Books<\/span>-->\r\n<!--      <span class=\"div-sublabel\">Available nationwide<\/span>-->\r\n<!--    <\/div>-->\r\n<!--  <\/div>-->\r\n<!--  <div class=\"div-cell\">-->\r\n<!--    <div class=\"div-num\">200+<\/div>-->\r\n<!--    <div class=\"div-info\">-->\r\n<!--      <span class=\"div-label\">Voices of Impact<\/span>-->\r\n<!--      <span class=\"div-sublabel\">Testimonials received<\/span>-->\r\n<!--    <\/div>-->\r\n<!--  <\/div>-->\r\n<!--<\/div>-->\r\n\r\n<script>\r\n  \/* ghost button arrow stays white on hover *\/\r\n  var ghostBtn = document.querySelector('.btn-ghost');\r\n  var ghostSvg = document.getElementById('ghost-arrow-svg');\r\n  if (ghostBtn && ghostSvg) {\r\n    ghostBtn.addEventListener('mouseenter', function() {\r\n      ghostSvg.setAttribute('stroke','#ffffff');\r\n    });\r\n    ghostBtn.addEventListener('mouseleave', function() {\r\n      ghostSvg.setAttribute('stroke','#C9A84C');\r\n    });\r\n  }\r\n\r\n  \/* card arrow polyline stroke swap *\/\r\n  document.querySelectorAll('.cta-card').forEach(function(card) {\r\n    var arrow = card.querySelector('.card-arrow');\r\n    if (!arrow) return;\r\n    card.addEventListener('mouseenter', function() {\r\n      arrow.querySelectorAll('polyline').forEach(function(p) { p.setAttribute('stroke','#ffffff'); });\r\n    });\r\n    card.addEventListener('mouseleave', function() {\r\n      arrow.querySelectorAll('polyline').forEach(function(p) { p.setAttribute('stroke','#C9A84C'); });\r\n    });\r\n  });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>About Dr. Michael J. Barnes 01 Author Dr. Michael J. Barnes B Educator \u00b7 Superintendent \u00b7 Author Dr. Michael J.Barnes An experienced educator, superintendent, and thought leader dedicated to transforming education through instructional leadership and innovation. With over three decades in education, he has led strategic initiatives that enhance student learning, foster community partnerships, and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":89,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":1832,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages\/14\/revisions\/1832"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}