/* Theme Name: TECWorks Child Theme
   Template: twentytwentyfive
   Description: Custom TECWorks child theme */

/* -------------------------- CSS VARIABLES ---------------------------*/
:root{
  --tw-bg: #e6ddf0;      /* lilac background */
  --tw-navy: #2e3240;    /* headings/navy */
  --tw-slate: #384058;   /* body / nav default */
  --tw-pink: #e5929e;    /* hover pink */
  --tw-purple: #8d2f88;  /* brand purple */
  --tw-green: #7dbb73;   /* CTA green */
  --radius: 18px;
  --card-radius: 24px;
  --shadow: 0 10px 24px rgba(30,28,38,.1);

  /* single post measurements */
  --single-content-max: 784px; /* article/feature width */
  --sidebar-lift: 0rem;        /* how far to pull the sidebar upward on desktop */
}

/* Gentle, responsive nudge for the sidebar so it can align with blog-hero.png top */
@media (min-width: 1100px){
  :root{
    --sidebar-lift: 16rem;
  }
}
@media (min-width: 1360px){
  :root{
    --sidebar-lift: 50rem;
  }
}

/* -------------------------- GLOBAL RESET / BASE ---------------------------*/
*{
  box-sizing:border-box;
}
html,body{
  margin:0;
  padding:0;
}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--tw-slate);
  background: #ffffff;
  line-height:1.4;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Generic container helper */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
}

/* Global link style */
a{
  color: var(--tw-navy);
  text-decoration:none;
}
a:hover{
  color: var(--tw-pink);
}

/* -------------------------- HEADER (sticky top bar) ---------------------------*/
header.site-header {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:1000;
  background-color: var(--tw-bg);
  border-bottom:1px solid #ccc;
  padding:1rem 0;
}
body.admin-bar header.site-header{
  top:32px;
}
@media(max-width:782px){
  body.admin-bar header.site-header{
    top:46px;
  }
}
header.site-header .header-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  padding:0 2rem;
}

/* Logo */
.site-header .logo img{
  height:60px;
  width:auto;
  display:block;
}
@media(max-width:768px){
  .site-header .logo img{
    height:48px;
  }
}

/* Nav */
.primary-navigation{
  flex:1;
  text-align:center;
}
.site-header .primary-navigation ul{
  list-style:none;
  display:inline-flex;
  gap:1.75rem;
  margin:0;
  padding:0;
}
.site-header .primary-navigation a{
  text-decoration:none;
  color:#384058;
  font-weight:600;
  font-size:1.1rem;
  line-height:1.2;
  transition:color .3s ease;
  white-space:nowrap;
}
.site-header .primary-navigation a:hover,
.site-header .primary-navigation a:focus,
.site-header .primary-navigation a:active{
  color: var(--tw-pink);
}

/* Email block */
.site-header .email-icon{
  display:flex;
  align-items:center;
}
.site-header .email-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.site-header .email-icon img{
  height:72px;
  width:auto;
  display:block;
}
@media(max-width:768px){
  .site-header .email-icon img{
    height:52px;
  }
}

/* Responsive header stack */
@media(max-width:768px){
  header.site-header .header-inner{
    flex-direction:column;
    align-items:center;
    gap:.75rem;
  }
  .primary-navigation{
    width:100%;
  }
  .site-header .primary-navigation ul{
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem 1.25rem;
  }
}

/* -------------------------- BUTTONS (global + CTA) ---------------------------*/
.btn{
  display:inline-block;
  font-weight:700;
  text-decoration:none;
  padding:.9rem 1.4rem;
  border-radius:999px;
  line-height:1;
  box-shadow: var(--shadow);
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
  border:0;
  cursor:pointer;
}
.btn:active{
  transform: translateY(1px);
}
.btn-green{
  background: var(--tw-green);
  color:#fff;
}
.btn-green:hover{
  filter: brightness(1.05);
}
.btn-rose{
  background:#f09aa7;
  color:#fff;
}
.btn-rose:hover{
  filter: brightness(1.05);
}

/* === TECWorks generic CTA buttons (used by resource CTA) === */
.tw-btn{
  display:inline-block;
  font-weight:700;
  text-decoration:none;
  padding:.9rem 1.4rem;
  border-radius:10px;
  line-height:1;
  box-shadow:0 10px 24px rgba(30,28,38,.12);
  transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
  border:0;
  cursor:pointer;
}
.tw-btn:active{
  transform: translateY(1px);
}
.tw-btn:focus{
  outline:2px solid #8d2f88;
  outline-offset:2px;
}
/* Pink primary button used by resource CTA */
.tw-btn-pink{
  background:#e5929e;
  color:#fff !important;
}
.tw-btn-pink:hover{
  filter:brightness(1.05);
}

/* -------------------------- HOME PAGE (front-page.php) ---------------------------*/
.tw-hero{
  background: var(--tw-bg);
  padding: 2rem 0 2rem;
}
.hero-grid{
  display:grid;
  gap:2rem;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
  }
}
.hero-copy h1{
  color:var(--tw-navy);
  font-size:clamp(2rem,1vw + 1.8rem,2.8rem);
  line-height:1.2;
  margin:0 0 2rem;
  font-weight:600;
  max-width:40ch;
}
.hero-art img{
  width:100%;
  height:auto;
  display:block;
}

/* Featured Modules */
.tw-featured{
  background:#eef3eb;
  padding:2rem 0 3rem;
  border-top:1px solid rgba(0,0,0,.05);
}
.tw-featured h2{
  color:var(--tw-navy);
  font-size:1.6rem;
  font-weight:600;
  margin:0 0 1.5rem;
}

/* Module grid */
.card-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:1000px){
  .card-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  .card-grid{
    grid-template-columns:1fr;
  }
}

/* Module card */
.card{
  background:#fff;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.card-media{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-body{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.card-body h3{
  margin:0;
  font-size:1.4rem;
  font-weight:600;
  line-height:1.3;
  color:var(--tw-navy);
}
.card-body p{
  margin:0;
  font-size:1rem;
  line-height:1.45;
  color:var(--tw-slate);
}
.card-body .btn-rose{
  font-size:1.2rem;
  width:100%;
  text-align:center;
  padding:1rem 1.2rem;
  border-radius:999px;
  box-shadow: var(--shadow);
}

/* -------------------------- BLOG LIST (archive) HERO + CAROUSEL ---------------------------*/
.tw-blog-hero{
  background: var(--tw-bg);
  padding:1.25rem 0 0.75rem;
  box-shadow:none;
  border-bottom:0;
}
.blog-hero-grid{
  display:grid;
  gap:1rem;
}
.blog-hero-art img{
  width:100%;
  height:auto;
  border-radius: var(--radius);
  box-shadow:none;
  display:block;
  max-width:1200px;
  margin:0 auto;
}

/* Carousel */
.tw-blog-carousel{
  background:#eef3eb;
  padding:1.25rem 0 2rem;
}
.carousel{
  position:relative;
}
.carousel-viewport{
  overflow:hidden;
  width:100%;
}
.carousel-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  transition:transform .45s ease;
}
.carousel-slide{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(3,1fr);
  padding:.5rem .25rem 1rem;
}
@media(max-width:1000px){
  .carousel-slide{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  .carousel-slide{
    grid-template-columns:1fr;
  }
}

.blog-card{
  background:#fff;
  border-radius: var(--card-radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(30,28,38,.15);
}
.blog-card-img{
  width:100%;
  height:auto;
  max-height:240px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.blog-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.25rem 1rem 1.5rem;
}
.blog-card-title{
  margin:0 0 .5rem;
  font-size:1.2rem;
  color:var(--tw-navy);
  line-height:1.3;
  font-weight:600;
}
.blog-card-title a{
  color:inherit;
  text-decoration:none;
}
.blog-card-title a:hover{
  color:var(--tw-pink);
}
.blog-card-excerpt{
  flex:1;
  margin:0 0 1rem;
  font-size:1rem;
  line-height:1.45;
  color:var(--tw-slate);
}
.blog-card-link{
  font-weight:700;
  text-decoration:none;
  color:var(--tw-navy);
  font-size:1rem;
}
.blog-card-link:hover{
  color:var(--tw-pink);
}

/* Carousel arrows */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:#fff;
  box-shadow: var(--shadow);
  cursor:pointer;
  font-size:22px;
  line-height:40px;
  text-align:center;
  color:var(--tw-navy);
}
.carousel-btn:hover{
  filter:brightness(1.05);
}
.carousel-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.carousel-btn.prev{
  left:.25rem;
}
.carousel-btn.next{
  right:.25rem;
}
@media(min-width:1200px){
  .carousel-btn.prev{
    left:-10px;
  }
  .carousel-btn.next{
    right:-10px;
  }
}

/* -------------------------- CONTACT PAGE ---------------------------*/
.tw-contact-hero {
  background: var(--tw-bg);
  padding: 3rem 0 3.5rem;
}
.contact-grid{
  max-width: 950px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
}
@media(max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
    max-width:90%;
    gap:2rem;
    padding:0 1rem;
  }
}
.contact-left{
  max-width: 480px;
}
.contact-card{
  background: #ffffff;
  box-shadow: var(--shadow);
  border-radius: var(--card-radius);
  padding: 1.5rem 1.5rem 2rem;
  color: var(--tw-slate);
  margin-bottom: 1.5rem;
}
.contact-card h1{
  margin: 0 0 1rem;
  color: var(--tw-navy);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
}
.contact-intro{
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 1rem;
  color: var(--tw-slate);
}

/* Form */
.tw-form-group{
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
.tw-form-label{
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tw-navy);
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.tw-form-input,
.tw-form-textarea{
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: .9rem 1rem;
  font-size: 1rem;
  line-height: 1.3;
  font-family: inherit;
  color: var(--tw-navy);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.tw-form-input:focus,
.tw-form-textarea:focus{
  outline: 2px solid var(--tw-purple);
  outline-offset: 0;
  border-color: var(--tw-purple);
}
.tw-form-textarea{
  min-height: 160px;
  resize: vertical;
}
.tw-form-submit-wrap{
  margin-top: 1.5rem;
}
.tw-form-submit-btn{
  width:auto;
  background: var(--tw-green);
  color: #fff;
  border:0;
  border-radius:999px;
  box-shadow: var(--shadow);
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}
.tw-form-submit-btn:hover{
  filter: brightness(1.05);
}

/* Contact details */
.contact-details-card{
  background: #ffffff;
  box-shadow: var(--shadow);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  color: var(--tw-slate);
  font-size: 1rem;
  line-height: 1.4;
}
.contact-details-card h2{
  margin:0 0 1rem;
  font-size:1.2rem;
  color:var(--tw-navy);
  font-weight:600;
}
.contact-details-row{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin-bottom:.75rem;
  color:var(--tw-navy);
  font-weight:500;
}
.contact-details-row .contact-details-icon{
  min-width:1rem;
  line-height:1.2;
  font-size:1rem;
}
.contact-details-row a{
  color:var(--tw-navy);
  text-decoration:none;
  font-weight:500;
  word-break:break-word;
}
.contact-details-row a:hover{
  color:var(--tw-pink);
}
.contact-note{
  font-size:.8rem;
  color:#555;
  line-height:1.4;
  margin-top:1rem;
}

/* Right column art */
.contact-right{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  height:100%;
  padding-top:1rem;
}
.contact-hero-figure{
  max-width:320px;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.contact-hero-img{
  width:100%;
  height:auto;
  border-radius: var(--card-radius);
  object-fit:contain;
  display:block;
}

/* Team row */
.tw-contact-team{
  background:#eef3eb;
  padding: 2rem 0 3rem;
  border-top:1px solid rgba(0,0,0,.05);
}
.contact-team-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap:2rem;
  justify-items:center;
  text-align:center;
}
.team-card{
  text-decoration:none;
  width:240px;
  max-width:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.team-card-avatar{
  width:240px;
  height:240px;
  border-radius:999px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow: 0 30px 60px rgba(0,0,0,0.18);
  position:relative;
  overflow:hidden;
}
.team-card-overlay{
  position:absolute;
  inset:0;
  background:rgba(46,50,64,0.8);
  color:#fff;
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  transition:opacity .2s ease;
}
.team-card:hover .team-card-overlay{
  opacity:1;
}
.team-card-text .team-card-name{
  font-weight:600;
  font-size:1rem;
  color:#fff;
  margin-bottom:.5rem;
  line-height:1.3;
}
.team-card-text .team-card-role{
  font-size:.9rem;
  line-height:1.4;
  color:#f5f5f5;
}
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:2rem;
    padding:0 1rem;
  }
  .contact-right{
    justify-content:center;
  }
  .contact-hero-figure{
    max-width:320px;
  }
}

/* -------------------------- SINGLE POST PAGE ---------------------------*/

/* Whole single post background panel */
.tw-single-wrapper{
  background-color: var(--tw-bg);
  padding-bottom: 4rem;
}

/* 1) Decorative blog hero art on single posts */
.tw-blog-header-art{
  background-color: var(--tw-bg);
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.tw-blog-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
}
.tw-blog-header-img{
  width:100%;
  max-width: var(--single-content-max);
  border-radius:24px;
  display:block;
  box-shadow:0 10px 24px rgba(30,28,38,.1);
}

/* 2) Post featured image */
.tw-single-hero{
  background-color: var(--tw-bg);
  padding-top:0;
  padding-bottom:1rem;
}
.tw-single-hero-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  justify-content:flex-start;
}
.tw-single-hero-img{
  width:100%;
  max-width: var(--single-content-max);
  border-radius:24px;
  display:block;
  box-shadow:0 10px 24px rgba(30,28,38,.1);
  height:auto;
  object-fit:cover;
}

/* 3) Meta block (title + byline) – limited to article width */
.tw-single-meta-block{
  max-width:1200px;
  margin:1rem auto 0 auto;
  padding:0 2rem;
  color:var(--tw-navy);
  text-align:left;
}
.tw-single-meta-block .tw-single-title,
.tw-single-meta-block .tw-single-byline{
  max-width: var(--single-content-max);
}
.tw-single-title{
  margin:0 0 .5rem;
  font-size: clamp(1.8rem, 1vw + 1.5rem, 2.2rem);
  line-height:1.2;
  color:var(--tw-navy);
  font-weight:600;
}
.tw-single-byline{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  font-size:1rem;
  color:var(--tw-slate);
  line-height:1.4;
}
.tw-single-byline .byline-dot{
  opacity:.5;
}

/* 4) Body + Sidebar grid */
.tw-single-body.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem 4rem;
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap:2rem;
  align-items:start;
  position:relative;
  top:0;
}

/* LEFT ARTICLE CARD */
.tw-single-article{
  background:#ffffff;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(30,28,38,0.1);
  padding:2rem;
  color:var(--tw-slate);
}
.tw-single-article-inner{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--tw-slate);
}
.tw-single-article-inner h2,
.tw-single-article-inner h3,
.tw-single-article-inner h4{
  color:var(--tw-navy);
  line-height:1.3;
  margin-top:2rem;
  margin-bottom:1rem;
  font-weight:600;
}
.tw-single-article-inner p{
  margin:0 0 1.25rem;
}

/* RIGHT SIDEBAR STACK */
.tw-single-sidebar{
  display:flex;
  flex-direction:column;
  gap:2rem;
  position:relative;
  top: calc(0rem - var(--sidebar-lift));
}

/* Related posts */
.tw-related-wrapper{
  background:#ffffff;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(30,28,38,0.1);
  padding:1.5rem;
  color:var(--tw-navy);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.tw-related-heading{
  margin:0;
  font-size:1.2rem;
  font-weight:600;
  color:var(--tw-navy);
  text-align:left;
}
.tw-related-vert-carousel{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:.75rem;
}
.tw-related-up,
.tw-related-down{
  width:32px;
  height:32px;
  margin:0 auto;
  border-radius:999px;
  border:none;
  background:#fff;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  color:var(--tw-navy);
  font-size:.9rem;
  font-weight:600;
  line-height:32px;
  text-align:center;
  cursor:pointer;
}
.tw-related-up:hover,
.tw-related-down:hover{
  filter:brightness(1.05);
}
.tw-related-viewport{
  max-height:320px;
  overflow-y:auto;
  padding-right:.5rem;
}
.tw-related-viewport::-webkit-scrollbar{
  width:6px;
}
.tw-related-viewport::-webkit-scrollbar-thumb{
  background: rgba(141,47,136,0.4);
  border-radius:3px;
}
.tw-related-vert-track{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.tw-related-mini-card{
  background:#f8f8f8;
  border-radius:16px;
  box-shadow:0 6px 12px rgba(0,0,0,0.08);
  overflow:hidden;
}
.tw-related-mini-link{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:.75rem;
  padding:.75rem;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.tw-related-mini-thumb img{
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:cover;
  display:block;
  background:#ddd;
}
.tw-related-mini-fallback{
  width:64px;
  height:64px;
  border-radius:12px;
  background:#ccc;
}
.tw-related-mini-body{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.tw-related-mini-title{
  margin:0 0 .25rem;
  font-size:.95rem;
  line-height:1.3;
  font-weight:600;
  color:var(--tw-navy);
  word-break:break-word;
}
.tw-related-mini-date{
  font-size:.8rem;
  line-height:1.3;
  color:var(--tw-slate);
}
.tw-related-empty{
  font-size:.9rem;
  color:var(--tw-slate);
  margin:0 auto;
  text-align:center;
}

/* Author card */
.tw-author-card{
  background:#ffffff;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(30,28,38,0.1);
  padding:1.5rem;
  text-align:center;
  color:var(--tw-navy);
}
.tw-author-heading{
  margin:0 0 1rem;
  font-size:1.2rem;
  font-weight:600;
  color:var(--tw-navy);
}
.tw-author-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.tw-author-avatar{
  width:140px;
  height:140px;
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  background:#fff;
}
.tw-author-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tw-author-info{
  text-align:center;
}
.tw-author-name{
  font-size:1rem;
  font-weight:600;
  color:var(--tw-navy);
  margin:0;
}
.tw-author-linkedin{
  display:inline-block;
  margin-top:.25rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--tw-pink);
  text-decoration:none;
}
.tw-author-linkedin:hover{
  text-decoration:underline;
}

/* RESPONSIVE (single page columns) */
@media (max-width: 900px){
  .tw-single-body.container{
    grid-template-columns:1fr;
  }
  .tw-single-sidebar{
    top:0;
  }
}

/* -------------------------- FOOTER (basic default) ---------------------------*/
.site-footer{
  padding:2rem 0;
  text-align:center;
  color:#666;
  font-size:.9rem;
  line-height:1.4;
}

/* --- SINGLE POST SIDEBAR LIFT --- */
.tw-single-sidebar {
  position: relative;
  top: 0;
}
@media (min-width: 1100px){
  .tw-single-sidebar {
    top: -20rem;
  }
}
@media (min-width: 1360px){
  .tw-single-sidebar {
    top: -24rem;
  }
}

/* Newsletter card edge-to-edge image */
.tw-newsletter-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(30, 28, 38, 0.1);
  padding: 0;
  text-align: center;
}
.tw-newsletter-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.tw-newsletter-img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  display: block;
}

/* -------------------------- GLOBAL FOOTER ---------------------------*/
.tw-footer {
  background-color: #e5929e;
  color: #fff;
  padding: 2rem 1.5rem 3rem;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
}
.tw-footer a {
  color: #fff;
  text-decoration: none;
}
.tw-footer a:hover,
.tw-footer a:focus {
  text-decoration: underline;
}
.tw-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  row-gap: 2rem;
  column-gap: 2rem;
  grid-template-columns: 1fr 1fr auto;
  grid-template-areas:
    "links contact social"
    "badges badges badges"
    "legal legal legal";
}
.tw-footer-col-links { grid-area: links; }
.tw-footer-col-contact { grid-area: contact; }
.tw-footer-col-social { grid-area: social; }

.tw-footer-heading {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.tw-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tw-footer-list li {
  margin: 0 0 .5rem;
}
.tw-footer-email,
.tw-footer-tel {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.tw-footer-email:hover,
.tw-footer-tel:hover {
  text-decoration: underline;
}
.tw-footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
}
.tw-social-btn img {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.tw-footer-badges {
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  border-top: 1px solid rgba(255,255,255,.4);
  padding-top: 1.5rem;
}
.tw-footer-badge {
  height: 60px;
  width: auto;
  display: block;
  object-fit: contain;
  max-width: 140px;
}
.tw-footer-legal {
  grid-area: legal;
  border-top: 1px solid rgba(255,255,255,.4);
  padding-top: 1rem;
  font-size: .8rem;
  line-height: 1.4;
  color: #fff;
}
.tw-footer-legal p {
  margin: 0;
  max-width: 1000px;
}

/* Responsive footer */
@media (max-width: 800px) {
  .tw-footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "links"
      "contact"
      "social"
      "badges"
      "legal";
  }
  .tw-footer-col-social {
    order: 3;
  }
  .tw-footer-social-icons {
    gap: 1rem;
  }
  .tw-footer-badges {
    justify-content: flex-start;
  }
}

/* Footer tagline strip */
.tw-footer-tagline {
  background-color: #e5929e;
  text-align: center;
  padding: 1.5rem 1rem 1rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.3;
  border-top: 1px solid rgba(255,255,255,0.3);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
@media (max-width: 800px) {
  .tw-footer-tagline {
    font-size: 1.2rem;
    padding: 1rem;
  }
}

/* --------------------------------- RESOURCE LIBRARY PAGE ----------------------------------*/
.tw-library-wrapper {
  background: #fff;
  color: var(--tw-navy);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

/* HERO */
.tw-library-hero {
  background: var(--tw-bg);
  padding: 2rem 1rem 2.5rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.tw-library-hero-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.tw-library-hero-copy {
  flex: 1 1 50%;
  max-width: 42rem;
  color: var(--tw-navy);
}
.tw-library-heading,
.tw-library-heading-strong {
  color: var(--tw-navy);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1rem;
  font-size: clamp(2rem,1vw + 1.5rem,2.5rem);
}
.tw-library-blurb {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tw-navy);
  max-width: 40ch;
}
.tw-library-hero-right {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.tw-library-search {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(30,28,38,.15);
  width: 100%;
  max-width: 320px;
  padding: .75rem 1rem;
  text-align: center;
}
.tw-library-search-input {
  border: none;
  width: 100%;
  font-size: 1rem;
  text-align: center;
  color: var(--tw-navy);
  font-weight: 500;
  outline: none;
}
.tw-library-search-input::placeholder {
  color: var(--tw-navy);
  opacity: .8;
  font-weight: 500;
}
.tw-library-hero-art {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(30,28,38,.18);
  padding: 1rem;
}
.tw-library-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: contain;
}
@media (max-width: 800px){
  .tw-library-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: left;
    max-width: 90%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tw-library-hero-copy {
    max-width: 42rem;
    width: 100%;
  }
  .tw-library-hero-right {
    width: 100%;
    max-width: 400px;
  }
}

/* TOPIC CARDS SECTION */
.tw-library-topics {
  background: #eef3eb;
  padding: 2.5rem 1rem 3rem;
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  text-align: center;
}
.tw-library-topics-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
}
.tw-library-topics-heading {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  color: #2e3240;
  text-align: center;
}

/* 4-across grid (desktop) */
.tw-library-topics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 2rem;
  justify-items: center;
  align-items: start;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.tw-topic-chip {
  background: #d98c94;
  color: #fff;
  text-decoration: none;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(30,28,38,.15);
  padding: 1.5rem 1.25rem;
  min-height: 120px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  transition: filter .2s ease, transform .2s ease;
}
.tw-topic-chip:hover {
  filter: brightness(1.05);
  transform: translateY(-3px);
  text-decoration: none;
}
.tw-topic-chip span {
  color: #fff;
  display: block;
}
@media (max-width: 900px) {
  .tw-library-topics-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
  }
  .tw-topic-chip {
    min-width: 200px;
  }
}
@media (max-width: 500px) {
  .tw-library-topics-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .tw-topic-chip {
    width: 100%;
    min-width: 0;
  }
}

/* FEATURED / NEWSLETTER SECTION */
.tw-library-featured {
  background: #fff;
  padding: 2rem 1rem 4rem;
}
.tw-library-featured-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.tw-library-featured-heading {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  color: #2e3240;
  margin: 0 0 1.5rem;
  text-align: center;
}

/* FEATURED CAROUSEL PANEL */
.tw-featured-carousel {
  background: var(--tw-bg);
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(30,28,38,.1);
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
}
.tw-featured-prev,
.tw-featured-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background:#fff;
  color: var(--tw-navy);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  box-shadow: 0 10px 24px rgba(30,28,38,.15);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.tw-featured-prev:hover,
.tw-featured-next:hover {
  filter: brightness(1.05);
}
.tw-featured-prev { left: 1rem; }
.tw-featured-next { right: 1rem; }
.tw-featured-viewport {
  overflow: hidden;
  width: 100%;
}
.tw-featured-track {
  display: flex;
  justify-content: center;
  gap: 1rem;
  will-change: transform;
  transition: transform .4s ease;
}
.tw-featured-card {
  flex: 0 0 320px;
  max-width: 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(30,28,38,.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.tw-featured-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tw-featured-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid rgba(0,0,0,.05);
  background:#f8f8f8;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tw-featured-thumb-fallback {
  width: 60%;
  height: 60%;
  background: #dcdcdc;
  border-radius: 8px;
}
.tw-featured-card-body {
  padding: 1rem;
  display:flex;
  flex-direction:column;
  gap: .5rem;
}
.tw-featured-card-title {
  margin:0;
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
  color: var(--tw-navy);
}
.tw-featured-card-desc {
  margin:0;
  font-size:.9rem;
  line-height:1.4;
  color: var(--tw-slate);
  flex:1;
}

/* Newsletter blurb + hero image under carousel */
.tw-library-news-copy {
  font-size:1rem;
  line-height:1.5;
  color: var(--tw-navy);
  max-width: 700px;
  margin: 4rem auto 1.5rem;
  font-weight:500;
}
.tw-library-news-hero {
  width:100%;
  max-width: 360px;
  margin: 0 auto;
}
.tw-library-news-img {
  width:100%;
  height:auto;
  display:block;
}
@media (max-width: 800px){
  .tw-featured-carousel {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tw-featured-prev{ left: .5rem; }
  .tw-featured-next{ right: .5rem; }
  .tw-featured-card {
    flex: 0 0 280px;
    max-width: 280px;
  }
}
@media (max-width: 600px){
  .tw-library-featured {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* =====================================================
   SAFEGUARDING CATEGORIES HUB PAGE (page-categories-hub.php)
   ===================================================== */
.tw-hub-wrapper {
  background: var(--tw-bg);
  color: var(--tw-navy);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}
.tw-hub-hero {
  background: var(--tw-bg);
  padding: 2rem 1rem 3rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.tw-hub-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.tw-hub-heading {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 0.4vw + 1.8rem, 2.4rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--tw-navy);
  text-align: center;
}
.tw-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  justify-items: center;
  align-items: start;
  text-align: center;
  margin: 2.5rem auto 2rem;
  max-width: 1000px;
  padding: 0 2rem;
}
.tw-hub-card {
  background: #98B683;
  border-radius: 24px;
  min-width: 220px;
  min-height: 180px;
  max-width: 260px;
  padding: 1.5rem 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all .25s ease;
}
.tw-hub-card:hover {
  filter: brightness(1.05);
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
  transform: translateY(-2px);
}
.tw-hub-card-text {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  text-wrap: balance;
  text-align: center;
}
.tw-hub-mascot {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: -1rem;
}
.tw-hub-mascot-img {
  max-width: 180px;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .tw-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tw-hub-mascot {
    grid-column: 2 / span 1;
    justify-content: center;
    margin-top: 0;
  }
  .tw-hub-mascot-img {
    max-width: 180px;
  }
}
@media (max-width: 560px) {
  .tw-hub-grid {
    grid-template-columns: 1fr;
  }
  .tw-hub-mascot {
    grid-column: 1 / span 1;
    order: 99;
    justify-content: center;
    margin-top: 1rem;
  }
  .tw-hub-mascot-img {
    max-width: 200px;
  }
}

/* Newsletter section under hub */
.tw-hub-newsletter-section {
  background: #fff;
  padding: 3rem 1.5rem 4rem;
  text-align: center;
  border-radius: 0;
}
.tw-hub-newsletter-inner {
  max-width: 900px;
  margin: 0 auto;
}
.tw-hub-newsletter-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--tw-navy);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.tw-hub-newsletter-img {
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
@media (max-width: 600px) {
  .tw-hub-newsletter-section {
    padding: 2rem 1rem 3rem;
  }
  .tw-hub-newsletter-text {
    font-size: 1rem;
  }
  .tw-hub-newsletter-img {
    width: 200px;
  }
}

/* =====================================================
   TOPIC PAGE (taxonomy-topic.php)
   ===================================================== */

/* Page wrapper uses lilac top / white bottom */
.tw-topic-wrapper {
  background: var(--tw-bg, #e6ddf0);
  color: var(--tw-navy, #2e3240);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
}

/* Breadcrumb row */
.tw-breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--tw-navy);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.tw-breadcrumb a {
  color: var(--tw-navy);
  text-decoration: none;
  font-weight: 600;
}
.tw-breadcrumb a:hover {
  text-decoration: underline;
}
.tw-crumb-sep {
  opacity: .5;
}
.tw-crumb-current {
  color: var(--tw-navy);
  font-weight: 600;
}

/* Topic header band */
.tw-topic-hero {
  background: var(--tw-bg);
  padding: 1rem 0 2rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.tw-topic-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.tw-topic-heading {
  font-size: clamp(1.8rem, 0.5vw + 1.4rem, 2.2rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--tw-navy);
  margin: 0 0 .75rem;
}
.tw-topic-desc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tw-navy);
  max-width: 60ch;
  margin: 0 0 1rem;
}

/* "Back to ..." pill */
.tw-topic-backlink {
  display: inline-block;
  background: #fff;
  color: var(--tw-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  padding: .6rem .9rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(30,28,38,.15);
  border: 2px solid transparent;
  transition: all .18s ease;
}
.tw-topic-backlink:hover {
  filter: brightness(1.03);
  box-shadow: 0 14px 32px rgba(30,28,38,.18);
}

/* Subtopic filter row (DEDUPED + GRID) */
.tw-subtopics {
  background: #e9e2f3;
  padding: 1rem 1rem 2rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.tw-subtopics-inner {
  max-width: 1024px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  justify-items: center;
}
@media (max-width: 700px){
  .tw-subtopics-inner {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
  }
}

/* Subtopic button (DEDUPED) */
.subtopic-btn{
  display: inline-block;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  background: #d98a96;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  border: 2px solid rgba(255,255,255,.5);
  transition: all .2s ease;
  width: 100%;
  max-width: 240px;
}
.subtopic-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.subtopic-btn.is-active {
  background: #3f2b56;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.6);
}
.subtopic-btn-all {
  background: #3b285c;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}

/* Resource list section */
.tw-topic-resources {
  background: #fff;
  padding: 2rem 0 4rem;
}
.tw-topic-resources-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.tw-topic-resource-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr));
  gap: 2rem;
}
.tw-topic-resource-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(30,28,38,.12);
  overflow: hidden;
  display: flex;
  transition: all .22s ease;
}
.tw-topic-resource-card:hover {
  box-shadow: 0 14px 32px rgba(30,28,38,.18);
  transform: translateY(-2px);
}
.tw-topic-resource-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.tw-topic-resource-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f8f8f8;
  border-bottom: 1px solid rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tw-topic-thumb-fallback {
  width: 60%;
  height: 60%;
  background: #dcdcdc;
  border-radius: 8px;
}
.tw-topic-resource-body {
  padding: 1rem 1rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.tw-topic-resource-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tw-navy);
  margin: 0;
}
.tw-topic-resource-excerpt {
  font-size: .9rem;
  line-height: 1.4;
  color: #384058;
  flex: 1;
}
.tw-topic-empty {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tw-navy);
  text-align: center;
  padding: 3rem 0;
}
@media (max-width: 600px){
  .tw-topic-backlink {
    font-size: .8rem;
    padding: .55rem .8rem;
  }
  .tw-topic-heading {
    font-size: 1.6rem;
  }
}

/* ===== TECWorks Resource PDF Carousel ===== */
.tw-carousel-wrapper {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.08);
  padding: 1.5rem 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
  position: relative;
  color: var(--tw-navy);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* prev/next buttons at top right */
.tw-carousel-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: .5rem;
  z-index: 5;
}
.tw-carousel-prev,
.tw-carousel-next {
  background: #fff;
  border: 2px solid rgba(0,0,0,.07);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2e3240;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  cursor: pointer;
}
.tw-carousel-prev:hover,
.tw-carousel-next:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.tw-carousel-prev:disabled,
.tw-carousel-next:disabled {
  opacity: .4;
  cursor: default;
  filter: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* viewport + track */
.tw-carousel-viewport {
  overflow: hidden;
  width: 100%;
  margin-top: 2.5rem;
}
.tw-carousel-track {
  display: flex;
  transition: transform .4s ease;
  will-change: transform;
}

/* each slide takes 100% width of the viewport */
.tw-carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
.tw-carousel-slide-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (max-width: 900px){
  .tw-carousel-slide-inner {
    grid-template-columns: 1fr;
  }
}

/* LEFT: preview card that hugs the featured image */
.tw-carousel-preview {
  background: #f7f7f8;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Featured image inside the preview box */
.tw-resource-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;  /* tweak if you want it wider/narrower */
  max-height: 480px; /* stops it taking over the whole page */
  object-fit: contain;
  border-radius: 16px;
}

/* Fallback PDF iframe if there’s no image */
.tw-pdf-frame {
  display: block;
  width: 100%;
  height: 480px;
  max-height: 70vh;
  border: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
@media (max-width: 900px){
  .tw-carousel-preview {
    padding: 1.25rem;
  }
  .tw-pdf-frame {
    height: 360px;
  }
}
@media (max-width: 500px){
  .tw-carousel-preview {
    padding: 0.75rem;
  }
  .tw-pdf-frame {
    height: 300px;
  }
}

/* Fallback message if there's no preview at all */
.tw-carousel-no-pdf {
  width:100%;
  min-height:200px;
  background:#efefef;
  border-radius:12px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  color:#444;
  font-size:1rem;
  line-height:1.4;
}

/* RIGHT side text/actions */
.tw-carousel-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tw-carousel-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
}
.tw-carousel-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: auto;
}

/* pink pill button (download/open) */
.tw-carousel-btn {
  display: inline-block;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  padding: .8rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  background: #d98a96;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  border: 2px solid rgba(255,255,255,.5);
  transition: all .15s ease;
}
.tw-carousel-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(0,0,0,.2);
}

/* outline button (view details) uses white */
.tw-carousel-btn.outline {
  background: #fff;
  color: #2e3240;
  border: 2px solid rgba(0,0,0,.1);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.tw-carousel-btn.outline:hover {
  filter: brightness(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* counter "1 / 3" under carousel */
.tw-carousel-count {
  text-align:center;
  color:#555;
  font-size:.9rem;
  font-weight:500;
  margin-top:1rem;
}

/* ================================
   Resource Highlight Box (refined)
   =============================== */
.tw-single-article-inner .resource-box {
  background: #faf8fc;
  border-left: 6px solid;
  border-image: linear-gradient(180deg, #8d2f88, #e5929e) 1;
  border-radius: 10px;
  padding: 1.4em 1.8em;
  margin: 2.5rem 0;
  font-size: 1.1em;
  line-height: 1.6;
  box-shadow: 0 3px 12px rgba(141, 47, 136, 0.08);
  transition: box-shadow 0.25s ease;
}
.tw-single-article-inner .resource-box:hover {
  box-shadow: 0 5px 18px rgba(141, 47, 136, 0.15);
}
.tw-single-article-inner .resource-box strong {
  display: block;
  font-size: 1.15em;
  color: #8d2f88;
  margin-bottom: 0.4em;
}
.tw-single-article-inner .resource-box a {
  display: inline-block;
  color: #fff;
  background: linear-gradient(90deg, #8d2f88, #e5929e);
  padding: 0.6em 1.2em;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 0.4em;
  font-size: 1em;
  box-shadow: 0 3px 8px rgba(141,47,136,0.25);
  transition: all 0.2s ease;
}
.tw-single-article-inner .resource-box a:hover {
  filter: brightness(1.05);
}
.tw-single-article-inner .resource-desc {
  display: block;
  margin-top: 0.8em;
  color: #333;
  font-size: 0.95em;
}

/* =========================================
   Compact Resource CTA (single posts)
   ========================================= */
.tw-resource-cta {
  text-align:center;
  background:#fff;
  border-radius:16px;
  padding:1.8rem 1.25rem 2rem;
  margin:3rem auto 2rem;
  box-shadow:0 10px 24px rgba(30,28,38,.08);
  max-width:var(--single-content-max);
}
.tw-resource-cta-heading {
  color:var(--tw-pink) !important;
  font-size:1.25rem;
  font-weight:700;
  margin:0 0 1rem;
  text-align:center;
}
.tw-resource-cta .tw-resource-cta-btn,
.entry-content .tw-resource-cta-btn {
  display:inline-block !important;
  background:var(--tw-green) !important;
  color:#fff !important;
  font-weight:700 !important;
  padding:.85em 1.6em !important;
  border-radius:999px !important;
  text-decoration:none !important;
  line-height:1 !important;
  box-shadow:0 4px 12px rgba(125,187,115,.25) !important;
  transition:transform .2s ease, filter .2s ease !important;
}
.tw-resource-cta .tw-resource-cta-btn:hover,
.entry-content .tw-resource-cta-btn:hover {
  transform:translateY(-1px);
  filter:brightness(1.05);
}
.tw-resource-cta-desc {
  margin: 1.2rem auto 0;
  color: var(--tw-slate);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 540px;
  text-align: center;
}
@media (max-width:640px){
  .tw-resource-cta{
    padding:1.4rem 1rem 1.6rem;
    margin:2rem auto 1.5rem;
  }
  .tw-resource-cta-heading{
    font-size:1.1rem;
  }
  .tw-resource-cta .tw-resource-cta-btn{
    font-size:.95rem;
    padding:.7em 1.3em;
  }
  .tw-resource-cta-desc{
    font-size:.9rem;
  }
}

/* =================================================
   NEW: Resource detail header + price badges
   ================================================= */
.single-resource .tw-resource-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.5rem;
}
.single-resource .tw-resource-title{
  font-size:2rem;
  line-height:1.2;
  margin:0;
  font-weight:600;
  color:var(--tw-navy);
}

/* Wrapper for image/iframe so the badge can sit on top */
.tw-resource-media {
  position: relative;
  display: inline-block;
}

/* Circular FREE / price badge over the preview */
.tw-price-badge{
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-35%, -50%);
  width:150px;
  height:150px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:22px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  box-shadow:0 14px 30px rgba(0,0,0,0.18);
  z-index:10;
}
.tw-price-badge--free{
  background:var(--tw-green);
  color:#fff;
}
.tw-price-badge--paid{
  background:#F6D26D;
  color:#4B1C5A;
}

/* ===== Template Letter Links ===== */
.tw-resource-content .wp-block-file .wp-block-file__button.wp-element-button,
.single-resource .wp-block-file__button,
.single-resource a.wp-block-file__button,
.single-resource .wp-element-button.wp-block-file__button {
  display: none !important;
}

/* Make the actual file text link bigger + pink */
.single-resource .tw-resource-content .wp-block-file > a:not(.wp-block-file__button),
.single-resource .tw-resource-content .wp-block-file .wp-block-file__content > a:first-child,
.tw-resource-content .wp-block-file a:not(.wp-block-file__button) {
  display: inline-block !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #e5929e !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

/* Hover = purple */
.single-resource .tw-resource-content .wp-block-file > a:not(.wp-block-file__button):hover,
.single-resource .tw-resource-content .wp-block-file .wp-block-file__content > a:first-child:hover,
.tw-resource-content .wp-block-file a:not(.wp-block-file__button):hover {
  color: #8d2f88 !important;
  text-decoration: underline !important;
}

/* Nice spacing between each file row */
.single-resource .tw-resource-content .wp-block-file,
.tw-resource-content .wp-block-file {
  margin: 0 0 1rem !important;
}

/* Remove WP left gap */
.single-resource .tw-resource-content .wp-block-file * + .wp-block-file__button {
  margin-left: 0 !important;
}

/* ================================
   Resource modal (FREE downloads)
   =============================== */
.tw-modal{position:fixed;inset:0;background:rgba(46,50,64,.55);display:none;z-index:9999;padding:24px}
.tw-modal[aria-hidden="false"]{display:block}
.tw-modal__dialog{max-width:820px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 10px 24px rgba(30,28,38,.12);padding:28px}
.tw-modal__title{color:var(--tw-navy);margin:0 0 8px}
.tw-modal__hint{color:var(--tw-slate);margin:0 0 18px}
.tw-modal__close{float:right;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer}
.tw-modal__close:focus{ outline:2px solid #8d2f88; outline-offset:2px; }
body.tw-modal-open{ overflow:hidden; }

/* =========================================== RABBIT HOLE BUTTON — FINAL STYLE =========================================== */
.tw-rabbit-button {
    display: flex;
    align-items: center;
    padding: 1rem 1.8rem 1rem 5.5rem;
    border-radius: 999px;
    background: #f1ecff;
    box-shadow: 0 18px 40px rgba(150, 120, 200, 0.28);
    text-decoration: none;
    position: relative;
    min-height: 100px;
    margin-top: 0.75rem;
}
.tw-rabbit-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
}
.tw-rabbit-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #4b255f;
    line-height: 1.3;
    white-space: nowrap;
}

/* =========================================== EMAIL RESOURCE / VIEWER BACK BUTTON =========================================== */
.tw-email-page-back-wrap {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: 0 1.5rem;
    text-align: left;
}
.tw-email-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #d49399;
    color: #fff;
    font-weight: 700;
    padding: 0.9rem 1.6rem;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.tw-email-back-btn:hover { filter: brightness(1.05); }
.tw-email-back-btn-icon { font-size: 1.1rem; }

/* ============================ PDF.js viewer page styling ============================ */
body.page-template-page-resource-pdf-viewer-pdf-js #outerContainer,
body.page-resource-pdf-viewer-pdf-js #outerContainer {
    background: transparent !important;
}
body.page-template-page-resource-pdf-viewer-pdf-js #viewerContainer,
body.page-resource-pdf-viewer-pdf-js #viewerContainer {
    max-width: 960px;
    width: calc(100% - 3rem);
    margin: 2rem auto 3rem;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
    padding: 1.5rem 1.25rem;
}
body.page-template-page-resource-pdf-viewer-pdf-js #mainContainer,
body.page-resource-pdf-viewer-pdf-js #mainContainer {
    margin: 0 auto;
    max-width: 1100px;
    background: transparent;
}
body.page-template-page-resource-pdf-viewer-pdf-js #sidebarContainer,
body.page-resource-pdf-viewer-pdf-js #sidebarContainer {
    display: none !important;
}
.tw-pdfjs-canvas-wrap {
    max-width: 900px !important;
    margin: 1rem auto !important;
    padding: 1.5rem !important;
    background: #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.10) !important;
    overflow: auto !important;
}
.tw-pdfjs-canvas-inner {
    display: flex !important;
    justify-content: center !important;
}
#tw-pdfjs-canvas {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}
.tw-pdfjs-wrapper {
    background: #f2ecfa;
    padding: 2rem 0 4rem;
}
.tw-pdfjs-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.tw-pdfjs-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.tw-pdfjs-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tw-pdfjs-heading {
    margin: 0;
    font-size: clamp(1.7rem, 0.8vw + 1.4rem, 2.1rem);
    font-weight: 600;
    color: #2e3240;
}
.tw-pdfjs-subtitle {
    margin: 0.5rem 0 1.5rem;
    font-size: 1rem;
    color: #2e3240;
}
.tw-pdfjs-controls-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.tw-pdfjs-page-label {
    font-size: 0.9rem;
    color: #384058;
}
.tw-pdfjs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    text-decoration: none;
}
.tw-pdfjs-btn-primary { background: #8d2f88; color: #fff; }
.tw-pdfjs-btn-ghost { background: #e5b6bc; color: #fff; }
.tw-pdfjs-btn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}
.tw-pdfjs-back-wrap { margin: 0.5rem 0 1.5rem; }
.tw-pdf-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0,0,0,.08);
    padding: 1.5rem;
    max-width: 100%;
    margin: 0 auto 3rem;
}
#tw-pdf-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.tw-pdfjs-error {
    background: #fff2f2;
    border-radius: 18px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    color: #612a2a;
}

/* =========================================== SINGLE RESOURCE PREV/NEXT NAV =========================================== */
.tw-resource-nav { position: absolute; top: 40px; z-index: 20; }
.tw-resource-nav--prev { left: 40px; }
.tw-resource-nav--next { right: 40px; }
.tw-resource-nav a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #3E1E67;
}
.tw-nav-arrow-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #3E1E67;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.tw-resource-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

/* ========================================= RESOURCE CAROUSEL NAV ========================================= */
.tw-carousel-wrapper { position: relative; }
.tw-carousel-controls {
    position: absolute;
    top: 0.75rem;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    z-index: 20;
    pointer-events: none;
}
.tw-carousel-prev,
.tw-carousel-next {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none !important;
    cursor: pointer;
    color: #3E1E67;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.tw-nav-arrow-icon {
    width: auto;
    height: auto;
    border: none !important;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tw-carousel-prev:hover,
.tw-carousel-next:hover {
    transform: translateX(-1px);
}
.tw-carousel-prev:disabled,
.tw-carousel-next:disabled {
    opacity: 0.3;
    cursor: default;
}
@media (max-width: 800px) {
    .tw-carousel-controls { top: 0.5rem; padding: 0 1rem; }
}
.tw-carousel-next { margin-right: 2.5rem; }
.tw-carousel-prev { margin-left: 0.2rem; }

/* ===================================== BIG FREE / PRICE CIRCLE ===================================== */
.tw-price-circle {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    letter-spacing: .08em;
}
.tw-price-circle--free { background: var(--tw-green, #7dbb73); }
.tw-price-circle--paid { background: var(--tw-pink, #e5929e); }
@media (max-width: 800px) {
    .tw-price-circle {
        width: 90px;
        height: 90px;
        font-size: 0.95rem;
        top: 1rem;
        left: 1rem;
    }
}

/* =============================== WRITE TO YOUR MP CTA =============================== */
.tw-mp-cta {
    display: flex;
    align-items: center;
    padding: 1rem 1.8rem 1rem 5.5rem;
    border-radius: 999px;
    background: #37164b;
    box-shadow: 0 18px 40px rgba(55,22,75,0.28);
    text-decoration: none;
    position: relative;
    min-height: 100px;
    margin-top: 0.75rem;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.3;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.tw-mp-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(55,22,75,0.35);
    opacity: 0.96;
}
.tw-mp-cta-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6eefb;
}
.tw-mp-cta-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tw-mp-cta-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tw-mp-cta-title { font-size: 0.95rem; font-weight: 700; }
.tw-mp-cta-sub { font-size: 0.75rem; font-weight: 400; opacity: 0.9; }
@media (max-width:768px){
    .tw-mp-cta{
        width:100%;
        padding:0.85rem 1.4rem 0.85rem 4.8rem;
        min-height:90px;
    }
    .tw-mp-cta-icon{
        width:72px;
        height:72px;
        left:-6px;
    }
}

/* =============================== PDF VIEWER — WRAPPER =============================== */
.tw-pdf-viewer-wrapper { position: relative; padding-bottom: 3rem; }
.tw-pdf-header {
    padding: 2.5rem 5vw 1.5rem;
    background: #f6edf7;
}
.tw-pdf-header-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.tw-pdf-back-btn {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    background: #f5afba;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.tw-pdf-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.tw-pdf-title {
    font-size: clamp(1.9rem, 2.5vw, 2.4rem);
    margin: 0;
}
.tw-pdf-subtitle {
    margin-top: 0.75rem;
    color: #7b728c;
    font-size: 0.95rem;
}
.tw-pdf-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    border-radius: 999px;
    background: #51b95f;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 16px 32px rgba(36,133,63,0.35);
    white-space: nowrap;
    font-size: 1rem;
}
.tw-pdf-email-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* =============================== PRICE CIRCLE =============================== */
.tw-pdf-price-wrap {
    position: absolute;
    top: -2.5rem;
    left: -1.5rem;
    width: 190px;
    height: 190px;
    z-index: 20;
}
.tw-pdf-price-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 22px 40px rgba(0,0,0,0.18);
}
.tw-pdf-price-free { background: #51b95f; color: #ffffff; }
.tw-pdf-price-paid { background: #e5929e; color: #ffffff; }
.tw-pdf-price-text {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* =============================== VIEWER AREA =============================== */
.tw-pdf-viewer-section {
    padding: 0 5vw 2.5rem;
}
.tw-pdf-viewer-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.tw-pdf-viewer-shell {
    position: relative;
    padding-top: 4rem;
}
.tw-pdf-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.tw-pdf-page-count {
    color: #4a4458;
    font-weight: 500;
}
.tw-pdf-nav-btn {
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
    background: #f5afba;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    font-size: 0.9rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.tw-pdf-nav-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.tw-pdf-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.tw-pdf-canvas-wrapper {
    position: relative;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    border-radius: 24px;
    overflow: hidden;
}
#tw-pdf-canvas {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .tw-pdf-price-wrap {
        width: 140px;
        height: 140px;
        top: -1.5rem;
        left: -0.75rem;
    }
    .tw-pdf-price-text { font-size: 1.4rem; }
    .tw-pdf-email-btn { width: 100%; justify-content: center; }
    .tw-pdf-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }
}

/* =============================== HOMEPAGE ALIGNMENTS =============================== */
.tw-hero .container {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.tw-hero .hero-copy { max-width: 560px; }

/* =============================== DISABLED BUTTONS =============================== */
.btn-disabled {
    display: inline-block;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    background: #e5929e;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.10);
    cursor: not-allowed;
    opacity: 0.7;
}

/* =============================== FEATURED MODULES =============================== */
.tw-featured .card-body {
    display: flex;
    flex-direction: column;
}
.tw-featured .card-body p {
    min-height: 3.8rem;
    margin-bottom: 1.2rem;
}
.tw-featured .card-body .btn-disabled {
    display: block;
    width: 100%;
    margin-top: auto;
}

/* =============================== FRONT DOWNLOADS =============================== */
.tw-front-downloads {
    padding: 4rem 0;
}
.tw-front-downloads-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2.5rem;
}
.tw-front-downloads-card {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-top: 2rem;
}
.tw-front-downloads-imagewrap {
    flex: 0 0 45%;
}
.tw-front-downloads-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}
.tw-front-downloads-copy {
    flex: 1;
    font-size: 1rem;
    line-height: 1.6;
}
.tw-front-downloads-heading {
    font-size: 2rem;
    margin: 0 0 0.75rem;
}
.tw-featured,
.tw-front-downloads {
    background: #f5fbf4;
}
@media (max-width: 800px) {
    .tw-front-downloads-inner { padding: 0 1.5rem; }
    .tw-front-downloads-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .tw-front-downloads-imagewrap,
    .tw-front-downloads-copy {
        width: 100%;
    }
}

/* =============================== HOMEPAGE FORUM SECTION =============================== */
.tw-front-forum {
    padding: 4rem 0 4.5rem;
    background: #e6ddf0;
}
.tw-front-forum-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2.5rem;
    text-align: center;
}
.tw-front-forum-hero {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(150,120,200,0.18);
    display: inline-block;
    margin: 0 auto 2.5rem;
}
.tw-front-forum-img {
    width: 650px;
    max-width: 100%;
    border-radius: 20px;
    display: block;
}
.tw-front-forum-heading {
    font-size: 2rem;
    margin: 0 0 0.75rem;
}
.tw-front-forum-text {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
}
@media (max-width: 800px) {
    .tw-front-forum-inner { padding: 0 1.5rem; }
    .tw-front-forum-heading { font-size: 1.6rem; }
}

/* =============================== FRONT BLOG =============================== */
.tw-front-blog {
    background: #ffffff;
    padding: 4rem 0 5rem;
}
.tw-front-blog-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2.5rem;
}
.tw-front-blog-heading {
    font-size: 2rem;
    margin-bottom: 2rem;
}
.tw-front-blog-carousel {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding-bottom: 0.5rem;
}
.tw-front-blog-carousel::-webkit-scrollbar { display: none; }
.tw-front-blog-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 14px 32px rgba(150,120,200,0.10);
    min-width: 24%;
    max-width: 24%;
    height: 520px;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    transform: scale(0.92);
    transform-origin: top center;
}
.tw-front-blog-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.tw-front-blog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.2rem;
}
.tw-front-blog-content h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    line-height: 1.35;
}
.tw-front-blog-content h3 a {
    text-decoration: none;
    color: #333;
}
.tw-front-blog-excerpt {
    font-size: 0.9rem;
    line-height: 1.45;
    opacity: 0.85;
    margin-top: auto;
}
@media (max-width: 800px) {
    .tw-front-blog-card {
        min-width: 78%;
        max-width: 78%;
        transform: scale(0.94);
    }
}

/* Wrap so arrows align with card height */
.tw-front-blog-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;   /* <-- this horizontally aligns arrows to card middle */
  gap: 1rem;
}

/* Arrows */
.tw-blog-arrow {
  background: transparent;
  border: none;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: #000;
}

/* LEFT ARROW */
.tw-blog-arrow-left {
  margin-right: 1rem;
}

/* RIGHT ARROW */
.tw-blog-arrow-right {
  margin-left: 1rem;
}

/* Make sure carousel takes available width */
.tw-front-blog-carousel {
  flex: 1;
}

/* Add more spacing between "Latest from the Blog" and the cards */
.tw-front-blog-carousel {
    margin-top: 2.5rem;  /* increase this number for a bigger gap */
}

/* ============================================================
   FEATURED MODULES – SLIDER / CAROUSEL
=============================================================== */

.tw-featured-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.tw-featured-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1.5rem;
    padding: 0.5rem;
    scrollbar-width: none;
}
.tw-featured-carousel::-webkit-scrollbar {
    display: none;
}

.tw-featured-arrow {
    background: transparent !important;
    border: none;
    color: #3c2e4f;
    font-size: 3rem;
    cursor: pointer;
}

.tw-featured-arrow-left { margin-right: 0.5rem; }
.tw-featured-arrow-right { margin-left: 0.5rem; }

.tw-featured-card {
    width: 240px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.07);
    padding: 1.2rem;
    flex-shrink: 0;
    text-align: center;
}

.tw-featured-thumb img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.tw-featured-card h3 {
    margin: 0.8rem 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #3c2e4f;
}

.tw-featured-card p {
    font-size: 0.9rem;
    color: #3c2e4f;
    line-height: 1.4;
    margin-bottom: 1rem;
}

/* Coming Soon button */
.tw-featured-card .btn-disabled {
    margin: 0 auto;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: #e5929e;
    color: #ffffff;
    font-size: 0.85rem;
}

/* Featured Modules Heading */
.tw-featured-title {
    margin-left: 2.5rem;
}

/* Remove default container padding */
.tw-featured .container {
    padding-left: 0 !important;
}

.tw-featured {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}


/* ============================================================
   Resource Library – Newsletter CTA
   (separate from homepage newsletter)
=============================================================== */

.tw-resource-newsletter {
    background: #e6ddf0;           /* lilac pill */
    border-radius: 80px;
    padding: 2.8rem 3rem 3.2rem;
    margin: 4rem auto 5rem;
    max-width: 1100px;
}

.tw-resource-newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Left text */
.tw-resource-newsletter-text {
    flex: 1;
    max-width: 560px;
}

.tw-resource-newsletter-text h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #3c2e4f;
    margin-bottom: 1.1rem;
}

.tw-resource-newsletter-text p {
    font-size: 1.2rem;
    color: #3c2e4f;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Button */
.tw-resource-newsletter-btn {
    display: inline-block;
    padding: 1rem 2.2rem;
    background: #7dbb73;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(125,187,115,0.4);
    transition: 0.2s ease;
}

.tw-resource-newsletter-btn:hover {
    background: #6aa864;
    box-shadow: 0 16px 36px rgba(125,187,115,0.45);
}

/* Right image */
.tw-resource-newsletter-img {
    flex-shrink: 0;
}

.tw-resource-newsletter-img img {
    width: 260px;
    height: auto;
    border-radius: 28px;
    display: block;
}

/* Mobile */
@media (max-width: 900px) {
    .tw-resource-newsletter {
        max-width: 100%;
        border-radius: 40px;
        padding: 2.2rem 1.6rem 2.4rem;
        margin: 3rem 1rem 4rem;
    }

    .tw-resource-newsletter-inner {
        flex-direction: column;
        text-align: center;
        gap: 1.6rem;
    }

    .tw-resource-newsletter-text {
        max-width: 100%;
    }

    .tw-resource-newsletter-img img {
        max-width: 220px;
    }
}

/* ============================================================
   HOMEPAGE – Newsletter CTA (tw-newsletter-block)
=============================================================== */

.tw-newsletter-block {
    padding: 4rem 1rem;
}

.tw-newsletter-shell {
    max-width: 1100px;
    margin: 0 auto;
    background: #e6ddf0;        /* lilac pill */
    border-radius: 80px;
    padding: 3rem 4rem;
}

.tw-newsletter-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* TEXT (left side) */
.tw-newsletter-copy {
    flex: 1;
    max-width: 560px;
}

.tw-newsletter-copy h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #3c2e4f;
    margin-bottom: 1.2rem;
}

.tw-newsletter-copy p {
    font-size: 1.2rem;
    color: #3c2e4f;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* BUTTON */
.tw-newsletter-button {
    display: inline-block;
    padding: 1rem 2.2rem;
    background: #7dbb73;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(125,187,115,0.4);
    transition: 0.2s ease;
}

.tw-newsletter-button:hover {
    background: #6aa864;
    box-shadow: 0 16px 36px rgba(125,187,115,0.45);
}

/* IMAGE (right side) */
.tw-newsletter-illustration img {
    width: 260px;
    height: auto;
    border-radius: 28px;
    display: block;
}

/* ------------------ MOBILE ------------------ */
@media (max-width: 900px) {
    .tw-newsletter-shell {
        padding: 2.2rem 1.6rem;
        border-radius: 40px;
    }

    .tw-newsletter-layout {
        flex-direction: column;
        text-align: center;
        gap: 1.6rem;
    }

    .tw-newsletter-copy {
        max-width: 100%;
    }

    .tw-newsletter-illustration img {
        max-width: 220px;
    }
}

/* ============================================================
   FRONT PAGE – Featured Modules
   Align "Coming Soon" buttons across cards
=============================================================== */

.tw-featured .tw-featured-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 2.5rem;     /* space under the text for the pill */
}

/* Lock the text block height so cards even out */
.tw-featured .tw-featured-card p {
    min-height: 72px;           /* tweak if needed */
    margin-bottom: 1.5rem;
}

/* Push the Coming Soon pill to the bottom + centre it */
.tw-featured .tw-featured-card .btn-disabled {
    margin-top: auto;           /* takes remaining space so pill sits low */
    align-self: center;         /* centred horizontally */
}

/* ============================================================
   RESOURCE LIBRARY – Featured Resource Carousel
   (scoped so it doesn't clash with homepage modules)
=============================================================== */

.tw-library-featured {
  padding: 3rem 0 4rem;
  background: #e6ddf0; /* lilac band */
}

.tw-library-featured .tw-library-featured-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.tw-library-featured .tw-library-featured-heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2e3240;
  margin-bottom: 1.75rem;
}

/* Carousel shell (inside Resource Library only) */

.tw-library-featured .tw-featured-carousel {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.tw-library-featured .tw-featured-viewport {
  flex: 1;
  overflow: hidden;
}

.tw-library-featured .tw-featured-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.4s ease;
}

/* Cards */

.tw-library-featured .tw-featured-card {
  flex: 0 0 320px;               /* fixed width so 3 show at desktop */
  max-width: 320px;
  background: #ffffff;
  border-radius: 32px;
  box-shadow: 0 18px 40px rgba(46, 50, 64, 0.18);
  display: flex;
  flex-direction: column;
}

/* Thumbnail + ribbon */

.tw-library-featured .tw-featured-card-thumb {
  position: relative;
  padding: 1.5rem 1.5rem 0.75rem;
}

.tw-library-featured .tw-featured-card-thumb img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 24px;
}

.tw-library-featured .tw-featured-thumb-fallback {
  width: 100%;
  height: 190px;
  border-radius: 24px;
  background: #e6ddf0;
}

.tw-library-featured .tw-featured-ribbon {
  position: absolute;
  top: 1.1rem;
  left: 2rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: #e5929e;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Card body */

.tw-library-featured .tw-featured-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  min-height: 175px;  /* keeps cards same height */
}

.tw-library-featured .tw-featured-card-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  color: #2e3240;
}

.tw-library-featured .tw-featured-card-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #384058;
}

.tw-library-featured .tw-featured-card-footer {
  margin-top: 0.4rem;
}

/* Green pill button */

.tw-library-featured .tw-featured-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: #7dbb73;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(125, 187, 115, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tw-library-featured .tw-featured-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(125, 187, 115, 0.4);
}

/* Arrow buttons – only inside resource library */

.tw-library-featured .tw-featured-prev,
.tw-library-featured .tw-featured-next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(46, 50, 64, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
}

.tw-library-featured .tw-featured-prev {
  margin-right: 0.25rem;
}

.tw-library-featured .tw-featured-next {
  margin-left: 0.25rem;
}

/* Small screens – let cards fill width */

@media (max-width: 768px) {
  .tw-library-featured .tw-featured-card {
    flex: 0 0 80%;
    max-width: 80%;
  }

  .tw-library-featured {
    padding: 2.5rem 0 3rem;
  }
}

/* Push carousel arrows OUTWARD so they are always fully clickable */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    background: transparent;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    color: #8d2f88;
}

/* Move LEFT arrow further left */
.carousel-btn.prev {
    left: -40px; /* you can increase to -50 or -60 if needed */
}

/* Move RIGHT arrow further right */
.carousel-btn.next {
    right: -40px; /* same, adjust if needed */
}

/* ============================================================
   TEC in Action – Case Study Cards
   White card from green top to green bottom
   Purple pills + aligned Practice Learning + aligned Quote
============================================================ */

.tw-cases-section {
  padding: 4rem 1.5rem 5rem;
  background: var(--tw-pink, #e5929e);
}

.tw-cases-container {
  max-width: 1160px;
  margin: 0 auto;
}

.tw-cases-heading {
  text-align: center;
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0 0 2.5rem;
}

.tw-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 2.5rem;
  justify-content: center;
}

/* ============================================================
   OUTER CARD = full white box (no more pink gap)
============================================================ */
.tw-case-card {
  max-width: 320px;
  margin: 0 auto;

  background: #ffffff;                 /* white card */
  border-radius: 32px;                 /* rounded corners for whole card */
  box-shadow: var(--shadow, 0 18px 40px rgba(46,50,64,0.18));
  overflow: hidden;                    /* clip children to round edges */

  display: flex;
  flex-direction: column;
  font-family: inherit;
}

/* ============================================================
   GREEN TOP HEADER (aligned between cards)
============================================================ */
.tw-case-topband {
  background: var(--tw-green, #7dbb73);
  color: #ffffff;
  padding: 1.4rem 1.2rem;
  text-align: center;
  font-weight: 700;

  /* header alignment */
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tw-case-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

/* ============================================================
   WHITE BODY CONTENT
   (no background here – card itself is white)
============================================================ */
.tw-case-body {
  padding: 1.6rem 1.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;                         /* stretch down toward CTA */
}

/* ============================================================
   PURPLE PILL BUBBLES (Approach / Challenge / Outcome)
============================================================ */
.tw-case-body-top {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.4rem;

  /* same height so Practice Learning starts on same line */
  min-height: 340px;                    /* tweak if needed */
}

.tw-case-pill {
  background: #f1ecff;
  border-radius: 24px;
  padding: 0.95rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.tw-case-pill-heading {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #3c2e4f;
}

/* ============================================================
   PRACTICE LEARNING + QUOTE SECTION
============================================================ */
.tw-case-mid {
  display: flex;
  flex-direction: column;

  /* same height so quotes line up */
  min-height: 260px;                    /* tweak if needed */
}

/* Practice Learning block */
.tw-case-learning {
  padding-top: 0.9rem;
  border-top: 1px solid rgba(60,46,79,0.12);
  font-size: 0.86rem;
  line-height: 1.4;
}

.tw-case-learning-heading {
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #3c2e4f;
}

/* Quote pushed to bottom of this section */
.tw-case-quote-line {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(60,46,79,0.1);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
  color: #2e3240;
}

/* ============================================================
   CTA BUTTON (attached to white card bottom)
============================================================ */
.tw-case-cta {
  display: block;
  background: var(--tw-green, #7dbb73);
  color: #ffffff;
  text-align: center;
  padding: 0.9rem 1.2rem;
  border-radius: 0 0 32px 32px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;

  margin-top: 0;                        /* no gap above CTA */
}

.tw-case-cta:hover,
.tw-case-cta:focus {
  text-decoration: underline;
}

/* ============================================================
   MOBILE – turn off forced heights so it flows
============================================================ */
@media (max-width: 900px) {

  .tw-case-topband {
    height: auto;
    padding: 1.2rem;
  }

  .tw-case-body-top,
  .tw-case-mid {
    min-height: auto;
  }
}

/* Make the white gap under the case-study cards lilac */
.tw-topic-resources {
  background: #e6ddf0 !important; /* lilac */
  padding-top: 5rem !important;   /* makes the lilac area taller */
  padding-bottom: 5rem !important;
}