:root{
  --navy:#0f3057;
  --navy-dark:#0c2545;
  --green:#1b5e3a;
  --green-dark:#134529;
  --cream:#f7f4ee;
  --text-dark:#1c2b3a;
  --text-muted:#4a5a6a;
  --border-light:#e3e0d8;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',Arial,Helvetica,sans-serif;
  color:var(--text-dark);
  background:#fff;
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.wrap{max-width:1264px;margin:0 auto;padding:0 24px;}

/* ===== Top FDIC bar ===== */
.fdic-bar{
  background:var(--navy);
  color:#fff;
  text-align:center;
  font-size:13.5px;
  font-weight:600;
  padding:8px 16px;
  letter-spacing:.2px;
}
.fdic-bar b{margin-right:6px;font-weight:900;}
.fdic-bar em{font-style:italic;font-weight:500;}

/* ===== Header ===== */
header.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  max-width:1264px;
  margin:0 auto;
  flex-wrap:wrap;
  gap:12px;
  position:relative;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo img{height:48px;width:auto;flex-shrink:0;}
.logo span{
  font-size:27px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:.2px;
}
.top-links{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
  color:var(--navy);
  font-weight:700;
  flex-wrap:wrap;
}
.top-links .divider{color:#c7c2b6;font-weight:400;}
.top-links a:hover{text-decoration:underline;}
.top-links .search-link{display:flex;align-items:center;gap:5px;}

/* ===== Nav ===== */
nav.main-nav{
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  position:relative;
}
.nav-inner{
  max-width:1264px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-links{
  display:flex;
  justify-content:space-between;
  flex:1;
  gap:24px;
  margin-right:48px;
}
.nav-links li{position:relative;}
.nav-links li a{
  display:block;
  padding:20px 0 14px;
  border-bottom:none;
  font-weight:900;
  font-size:17px;
  color:var(--navy);
  position:relative;
  letter-spacing:.2px;
}
.nav-links li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:10px;
  width:0;
  height:4px;
  background:var(--green-dark);
  transition:width .3s ease;
}
.nav-links li a:hover{color:var(--green-dark);}
.nav-links li a:hover::after{width:100%;}
.nav-item.menu-active > a{color:var(--green-dark);}
.nav-item.menu-active > a::after{width:100%;}

/* ===== Mega menu ===== */
.mega-menu-panel{
  display:none;
  position:absolute;
  top:100%;
  left:24px;
  width:900px;
  max-width:calc(100vw - 48px);
  background:#fff;
  box-shadow:0 24px 48px rgba(15,48,87,.18);
  z-index:40;
  padding:36px 40px;
  gap:0;
}
.mega-menu-panel.open{display:flex;}
.mega-col{
  min-width:210px;
  padding-right:32px;
}
.mega-col + .mega-col{
  padding-left:32px;
  border-left:1px solid var(--border-light);
}
.mega-col.mega-trending{border-left-color:var(--green);}
.mega-col h4{
  font-size:16px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:16px;
}
.mega-col h4.mega-trending-heading{
  display:inline-block;
  border-bottom:2px solid var(--green);
  padding-bottom:6px;
}
.mega-col ul{list-style:none;}
.mega-col ul li{margin-bottom:13px;}
.mega-col ul li a{
  font-size:15px;
  font-weight:700;
  color:var(--text-dark);
}
.mega-col ul li a:hover{color:var(--green-dark);text-decoration:underline;}
.mega-view-all{
  display:inline-block;
  margin-top:6px;
  font-size:15px;
  font-weight:800;
  color:#1a56db;
}
.mega-view-all:hover{text-decoration:underline;}
.mega-promo{
  flex:1;
  padding-left:32px;
  max-width:300px;
}
.mega-promo-img{
  height:150px;
  border-radius:10px;
  background-size:cover;
  background-position:center;
}
.mega-promo-card{
  background:#f4f1ea;
  border-radius:10px;
  margin:-20px 14px 0;
  padding:14px 16px;
  position:relative;
  box-shadow:0 4px 12px rgba(15,48,87,.08);
}
.mega-promo-card h5{
  font-size:16px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:6px;
}
.mega-promo-card p{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.5;
  margin-bottom:8px;
  font-weight:600;
}
.mega-promo-card a{
  font-size:14px;
  font-weight:800;
  color:#1a56db;
}
.mega-promo-card a:hover{text-decoration:underline;}

/* Plain mega menu (Resources / About Us) - 4 columns, no dividers, no promo */
.mega-menu-panel.mega-plain{
  width:1000px;
  padding:32px 40px 40px;
  gap:0;
}
.mega-menu-panel.mega-plain .mega-col{
  flex:1;
  min-width:180px;
  padding-right:28px;
}
.mega-menu-panel.mega-plain .mega-col + .mega-col{
  padding-left:0;
  border-left:none;
}
.mega-menu-panel.mega-plain .mega-col ul li{margin-bottom:12px;}
.mega-menu-panel.mega-plain .mega-view-all{margin-top:14px;}

.login-btn{
  background:var(--green);
  color:#fff !important;
  padding:12px 28px;
  border-radius:24px;
  font-weight:800;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background .15s ease;
}
.login-btn:hover{background:var(--green-dark);}
.login-wrap{position:relative;}

/* ===== Login dropdown ===== */
.login-dropdown{
  position:absolute;
  top:calc(100% + 20px);
  right:0;
  width:348px;
  background:#fff;
  border:2px solid #3ea883;
  border-radius:20px;
  padding:26px 28px 0;
  box-shadow:0 12px 30px rgba(15,48,87,.14);
  display:none;
  z-index:50;
  overflow:hidden;
}
.login-wrap.open .login-dropdown{display:block;}
.login-dropdown-arrow{
  position:absolute;
  top:calc(100% - 4px);
  right:24px;
  width:64px;
  height:28px;
  display:none;
  z-index:51;
}
.login-wrap.open .login-dropdown-arrow{display:block;}
.login-tabs{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}
.login-tab-divider{
  width:1px;
  height:16px;
  background:#d3d0c6;
  flex-shrink:0;
}
.login-tab{
  background:none;
  border:none;
  padding:0 0 10px;
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  position:relative;
}
.login-tab.active{
  color:var(--green);
  font-weight:800;
}
.login-tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--green);
}
.login-panel{display:none;}
.login-panel.active{display:block;}
.login-panel[data-panel="additional"]{
  max-height:360px;
  overflow-y:auto;
  padding-bottom:4px;
}
.login-link-list{
  list-style:none;
  margin:0;
  padding:0;
}
.login-link-list li{
  border-bottom:1px solid var(--border-light);
}
.login-link-list li:last-child{
  border-bottom:none;
}
.login-link-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 2px;
  font-size:15px;
  font-weight:700;
  color:var(--navy);
}
.login-link-list a svg{
  width:16px;
  height:16px;
  stroke:var(--navy);
  flex-shrink:0;
}
.login-link-list a:hover{color:var(--green);}
.login-link-list a:hover svg{stroke:var(--green);}
.login-field{
  width:100%;
  border:1px solid #d3d0c6;
  border-radius:26px;
  padding:13px 20px;
  font-size:15px;
  color:var(--text-dark);
  outline:none;
  margin-bottom:16px;
  font-weight:600;
}
.login-field:focus{border-color:#3ea883;}
.login-field::placeholder{color:#8a8a85;}
.login-submit{
  display:block;
  width:100%;
  background:var(--green-dark);
  color:#fff;
  border-radius:26px;
  padding:14px 0;
  font-weight:800;
  font-size:16px;
  text-align:center;
  margin-bottom:16px;
}
.login-submit:hover{background:#0f3a24;}
.login-enroll{
  display:block;
  text-align:center;
  color:var(--green-dark);
  font-weight:800;
  font-size:15px;
  margin-bottom:20px;
}
.login-enroll:hover{text-decoration:underline;}
.login-close-row{
  background:#f2efe7;
  margin:0 -28px;
  padding:12px 28px;
  text-align:center;
}
.login-close{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#6b6b66;
  font-size:14px;
  font-weight:700;
  background:none;
  border:none;
  cursor:pointer;
}
.login-close:hover{color:var(--text-dark);}

/* ===== Mobile header (hidden on desktop) ===== */
.mobile-header{
  display:none;
}
.mobile-menu-panel{
  display:none;
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background-image:url('/alpine-bank/images/main-hero.png');
  background-size:cover;
  background-position:center;
}
.hero-people{
  position:absolute;
  right:0;
  bottom:0;
  width:56%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:.9;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:1264px;
  margin:0 auto;
  padding:0 24px;
  width:100%;
}
.hero-card{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px);
  max-width:460px;
  padding:40px 38px;
  border-radius:16px;
  animation:slideInLeft .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-80px);}
  to{opacity:1;transform:translateX(0);}
}
.hero-card h1{
  font-size:30px;
  line-height:1.3;
  color:var(--navy);
  font-weight:700;
  margin-bottom:18px;
}
.hero-card h1 .thin{font-weight:700;color:#000;}
.hero-card p{
  font-size:16px;
  color:var(--text-muted);
  line-height:1.6;
  font-weight:600;
}

/* ===== Icon strip ===== */
.icon-strip{
  padding:60px 24px 50px;
  max-width:1264px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  text-align:center;
}
.icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  transition:transform .3s ease, box-shadow .3s ease;
  padding:16px 10px;
  border-radius:8px;
  background:transparent;
}
.icon-item:hover{
  transform:scale(0.92);
  box-shadow:0 12px 28px rgba(15,48,87,.12);
}
.icon-item .icon-circle img{
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
}
.icon-item span{
  font-weight:700;
  font-size:14px;
  color:var(--navy);
  max-width:150px;
  line-height:1.4;
}

/* ===== Promo cards ===== */
.promo-section{
  max-width:1264px;
  margin:10px auto 70px;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:22px;
  align-items:stretch;
}
.promo-col{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.promo-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  flex:1;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:26px 26px 0;
  color:var(--navy);
  transition:transform .3s ease, box-shadow .3s ease;
}
.promo-card:hover{
  transform:scale(0.96);
  box-shadow:0 18px 32px rgba(15,48,87,.16);
}
.promo-card.tall{min-height:462px;}

/* Entrance animations for promo cards */
.promo-card[data-anim="left"]{
  animation:promoInLeft .9s cubic-bezier(.22,.61,.36,1) both;
}
.promo-card[data-anim="right"]{
  animation:promoInRight .9s cubic-bezier(.22,.61,.36,1) both;
}
.promo-card[data-anim="bottom"]{
  animation:promoInBottom .9s cubic-bezier(.22,.61,.36,1) both;
}
.promo-card[data-anim="top"]{
  animation:promoInTop .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes promoInLeft{
  from{opacity:0;transform:translateX(-100px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes promoInRight{
  from{opacity:0;transform:translateX(100px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes promoInBottom{
  from{opacity:0;transform:translateY(80px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes promoInTop{
  from{opacity:0;transform:translateY(-80px);}
  to{opacity:1;transform:translateY(0);}
}

/* Layering: gradient shapes at bottom, image above them, text on top */
.promo-card .bg-photo{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.45;
}
.promo-card .bg-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:2;
}
.promo-card .promo-text{
  position:relative;
  z-index:3;
}
.promo-card h3{
  font-size:21px;
  font-weight:900;
  line-height:1.3;
  margin-bottom:16px;
  max-width:220px;
}
.promo-btn{
  display:inline-block;
  background:#fff;
  color:var(--green-dark);
  border:1.5px solid var(--green);
  padding:10px 22px;
  border-radius:22px;
  font-weight:800;
  font-size:15px;
}
.card-commercial .bg-photo{background:linear-gradient(180deg,#f2ece0 0%,#d9cdb4 100%);}
.card-fraud .bg-photo{background:linear-gradient(180deg,#f4eee2 0%,#e4d9c3 100%);}
.card-loyalty .bg-photo{background:linear-gradient(180deg,#f2ece0 0%,#e0d4bb 100%);}
.card-lending .bg-photo{background:linear-gradient(180deg,#f2ede2 0%,#dccdb0 100%);}

.photo-figure{
  position:absolute;
  bottom:0;
  right:0;
  width:70%;
  height:65%;
  background-size:cover;
  background-position:center;
  opacity:.6;
}

/* ===== Business Section ===== */
.biz-section{
  text-align:center;
  padding:20px 24px 60px;
  max-width:900px;
  margin:0 auto;
}
.biz-section h2{
  font-size:32px;
  color:var(--navy);
  font-weight:900;
  margin-bottom:18px;
}
.biz-section p{
  color:var(--text-muted);
  font-size:17px;
  line-height:1.6;
  font-weight:600;
}

/* ===== Business Cards with Flip Animation ===== */
.biz-cards{
  max-width:1264px;
  margin:20px auto 70px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.biz-card{
  background:var(--cream);
  border-radius:14px;
  padding:34px 28px 30px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .3s ease, box-shadow .3s ease;
  opacity:0;
  transform:rotateY(90deg);
  transform-origin:right center;
  backface-visibility:hidden;
}
.biz-card.revealed{
  opacity:1;
  transform:rotateY(0deg);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.biz-card:hover{
  transform:scale(0.94);
  box-shadow:0 18px 32px rgba(15,48,87,.14);
}
.biz-card img{
  width:72px;
  height:72px;
  object-fit:contain;
  margin-bottom:20px;
}
.biz-card h3{
  color:var(--navy);
  font-size:20px;
  font-weight:900;
  margin-bottom:12px;
}
.biz-card p{
  color:var(--text-muted);
  font-size:15px;
  line-height:1.5;
  margin-bottom:22px;
  min-height:66px;
  font-weight:600;
}
.biz-btn{
  background:var(--green);
  color:#fff;
  padding:12px 24px;
  border-radius:22px;
  font-weight:800;
  font-size:15px;
  display:inline-block;
}
.biz-btn:hover{background:var(--green-dark);}

/* ===== Community section ===== */
.community-section{
  max-width:1264px;
  margin:0 auto 70px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:30px;
}
.community-text{
  max-width:420px;
}
.community-text h2{
  color:var(--navy);
  font-size:26px;
  font-weight:800;
  margin-bottom:16px;
  white-space:nowrap;
}
.community-text p{
  color:var(--text-muted);
  font-size:16px;
  line-height:1.6;
  font-weight:600;
}
.stat-cards{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.stat-card{
  background:#fff;
  border:1px solid var(--border-light);
  box-shadow:0 6px 18px rgba(20,40,30,.08);
  border-radius:4px;
  padding:30px 26px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  max-width:320px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.stat-card:hover{
  transform:scale(0.94);
  box-shadow:0 18px 32px rgba(20,40,30,.16);
}
.stat-card img{
  width:72px;
  height:72px;
  object-fit:contain;
  flex-shrink:0;
  margin-top:4px;
}
.stat-card .num{
  color:var(--green-dark);
  font-size:40px;
  font-weight:900;
  line-height:1;
  margin-bottom:8px;
}
.stat-card p{
  color:var(--text-muted);
  font-size:15px;
  line-height:1.5;
  font-weight:600;
}

/* ===== Footer ===== */
.footer-bar{
  background:var(--navy);
  height:14px;
}
footer{
  padding:60px 24px 30px;
  max-width:1264px;
  margin:0 auto;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.4fr;
  gap:30px;
  margin-bottom:50px;
}
.footer-col h4{
  color:var(--navy);
  font-size:18px;
  font-weight:900;
  margin-bottom:18px;
}
.footer-col a{
  display:block;
  color:var(--text-muted);
  font-size:15px;
  margin-bottom:14px;
  font-weight:600;
}
.footer-col a:hover{color:var(--green);text-decoration:underline;}
.footer-search{
  display:flex;
  border:1px solid var(--border-light);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:22px;
  max-width:280px;
}
.footer-search input{
  flex:1;
  border:none;
  padding:11px 14px;
  font-size:15px;
  outline:none;
  font-weight:600;
}
.footer-search button{
  padding:0 16px;
  background:#fff;
}
.footer-search button svg{width:18px;height:18px;stroke:var(--navy);}
.social-icons{
  display:flex;
  gap:10px;
}
.social-icons a{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.social-icons a svg{width:20px;height:20px;fill:#fff;}
.social-icons a:hover{background:var(--green);transform:translateY(-2px);}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding-top:36px;
  border-top:1px solid var(--border-light);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-brand img{height:44px;width:auto;}
.footer-brand span{
  font-size:23px;
  font-weight:900;
  color:var(--navy);
}
.footer-legal{
  text-align:right;
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.6;
  font-weight:600;
}
.footer-badges{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:10px;
  justify-content:flex-end;
}
.footer-badges img{height:40px;width:auto;}
.footer-links-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:14px;
  color:var(--text-muted);
  margin-top:18px;
  font-weight:600;
}
.footer-links-row a:hover{text-decoration:underline;color:var(--green);}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .icon-strip{grid-template-columns:repeat(3,1fr);}
  .biz-cards{grid-template-columns:repeat(2,1fr);}
  .promo-section{grid-template-columns:1fr;}
  .promo-card.tall{min-height:260px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{gap:20px;flex-wrap:wrap;}
}

@media (max-width:640px){
  /* Hide desktop header/nav, show mobile header */
  .desktop-header,
  nav.main-nav{display:none;}

  .mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    position:relative;
    border-bottom:1px solid var(--border-light);
  }
  .mobile-menu-toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:var(--green-dark);
    background:none;
    border:none;
    cursor:pointer;
  }
  .mobile-menu-toggle svg{width:22px;height:22px;}
  .mobile-menu-toggle span{
    font-size:12px;
    font-weight:800;
    letter-spacing:.3px;
    color:var(--green-dark);
  }
  .mobile-menu-toggle .icon-close{display:none;}
  .mobile-menu-toggle.open .icon-hamburger{display:none;}
  .mobile-menu-toggle.open .icon-close{display:block;}

  .mobile-logo{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .mobile-logo img{height:38px;width:auto;flex-shrink:0;}
  .mobile-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
  }
  .mobile-logo-text .brand{
    font-size:19px;
    font-weight:900;
    color:var(--navy);
  }
  .mobile-logo-text .member{
    font-size:10.5px;
    color:var(--navy);
    font-weight:700;
    letter-spacing:.2px;
  }

  .mobile-login{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:var(--green-dark);
  }
  .mobile-login svg{width:20px;height:20px;}
  .mobile-login span{
    font-size:12px;
    font-weight:800;
    letter-spacing:.3px;
    color:var(--green-dark);
  }

  .mobile-menu-panel{
    display:none;
    background:#fff;
    border-bottom:1px solid var(--border-light);
  }
  .mobile-menu-panel.open{display:block;}
  .mobile-menu-panel ul{display:flex;flex-direction:column;}
  .mobile-menu-panel li{
    border-bottom:1px solid var(--border-light);
  }
  .mobile-menu-panel li a{
    display:block;
    padding:16px 18px;
    font-weight:800;
    font-size:16px;
    color:var(--navy);
  }
  .mobile-menu-footer{
    padding:16px 18px 22px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .mobile-menu-footer-links{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .mobile-menu-footer .clock-icon{
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--navy);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .mobile-menu-footer .clock-icon svg{width:12px;height:12px;stroke:#fff;}
  .mobile-menu-footer a{
    font-size:15px;
    font-weight:700;
    color:var(--navy);
  }
  .mobile-menu-footer a:hover{text-decoration:underline;}

  header.site-header{flex-direction:column;align-items:flex-start;}
  .top-links{font-size:14px;}
  .nav-inner{flex-direction:column;align-items:flex-start;padding-bottom:14px;}
  .nav-links{flex-wrap:wrap;gap:16px;}
  .icon-strip{grid-template-columns:repeat(2,1fr);}
  .biz-cards{grid-template-columns:1fr;}
  .hero-card{max-width:100%;}
  .community-text h2{white-space:normal;font-size:24px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .footer-legal{text-align:left;}
  .footer-badges{justify-content:flex-start;}
}

/* ============================================================
   INNER PAGE SECTIONS
   Used on section hub pages and product pages (not the homepage)
   ============================================================ */

/* ===== Page hero (short banner at top of inner pages) ===== */
.page-hero{
  position:relative;
  min-height:340px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.page-hero-inner{
  position:relative;
  z-index:2;
  max-width:1264px;
  margin:0 auto;
  padding:48px 24px;
  width:100%;
}
.page-hero-card{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px);
  max-width:560px;
  padding:36px 38px;
  border-radius:16px;
  color:var(--text-dark);
}
.breadcrumb{
  font-size:14px;
  font-weight:700;
  color:var(--text-muted);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.breadcrumb a{
  color:var(--navy);
  text-decoration:none;
  font-weight:700;
}
.breadcrumb a:hover{
  text-decoration:underline;
}
.breadcrumb span{
  color:var(--text-muted);
}
.page-hero h1{
  font-size:36px;
  font-weight:900;
  line-height:1.2;
  margin-bottom:14px;
  letter-spacing:-.3px;
  color:var(--navy);
}
.page-hero p{
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}

/* ===== Product grid (cards on hub pages) ===== */
.page-grid{
  padding:64px 24px;
  background:#fff;
}
.page-grid-inner{
  max-width:1264px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.page-card{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:14px;
  padding:32px 28px 28px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.page-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 32px rgba(15,48,87,.12);
  border-color:var(--green);
}
.page-card-icon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  border-radius:12px;
  margin-bottom:20px;
}
.page-card-icon img{
  width:40px;
  height:40px;
  object-fit:contain;
}
.page-card h3{
  font-size:19px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:10px;
  line-height:1.3;
}
.page-card p{
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:20px;
  flex-grow:1;
}
.page-card-link{
  font-size:15px;
  font-weight:800;
  color:var(--green-dark);
  display:inline-block;
}
.page-card:hover .page-card-link{
  color:var(--green);
}

/* ===== CTA strip (bottom of inner pages) ===== */
.cta-strip{
  padding:72px 24px;
  background:var(--cream);
}
.cta-strip-inner{
  max-width:860px;
  margin:0 auto;
  text-align:center;
}
.cta-strip h2{
  font-size:32px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:14px;
  letter-spacing:-.2px;
}
.cta-strip p{
  font-size:17px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:32px;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
.cta-buttons{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.cta-btn-primary{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:14px 32px;
  border-radius:24px;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  transition:background .2s ease;
}
.cta-btn-primary:hover{
  background:var(--green-dark);
}
.cta-btn-secondary{
  display:inline-block;
  background:#fff;
  color:var(--green-dark);
  border:1.5px solid var(--green);
  padding:13px 32px;
  border-radius:24px;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  transition:background .2s ease;
}
.cta-btn-secondary:hover{
  background:var(--green);
  color:#fff;
}

/* ===== Product content (inner sections on product pages) ===== */
.product-content{
  padding:72px 24px;
  background:#fff;
}
.product-content-inner{
  max-width:1100px;
  margin:0 auto;
}
.product-intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 56px;
}
.product-intro h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:16px;
  letter-spacing:-.2px;
}
.product-intro p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

.product-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-bottom:56px;
}
.product-feature{
  background:var(--cream);
  border-radius:14px;
  padding:28px 26px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.product-feature:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(15,48,87,.10);
}
.product-feature-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  margin-bottom:16px;
}
.product-feature-icon img{
  width:32px;
  height:32px;
  object-fit:contain;
}
.product-feature h3{
  font-size:18px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:8px;
}
.product-feature p{
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}

.product-info{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:14px;
  padding:40px 44px;
}
.product-info h2{
  font-size:24px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:22px;
  letter-spacing:-.2px;
}
.product-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px 32px;
}
.product-list li{
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-dark);
  font-weight:600;
  padding-left:28px;
  position:relative;
}
.product-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:16px;
  height:16px;
  background:var(--green);
  border-radius:50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>");
  background-size:cover;
}

/* ===== Responsive inner-page rules ===== */
@media (max-width:1024px){
  .page-grid-inner{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  .page-hero{
    padding:0;
  }
  .page-hero-inner{
    padding:36px 20px;
  }
  .page-hero h1{
    font-size:28px;
  }
  .page-hero p{
    font-size:16px;
  }
  .page-grid{
    padding:48px 20px;
  }
  .page-grid-inner{
    grid-template-columns:1fr;
    gap:18px;
  }
  .cta-strip{
    padding:56px 20px;
  }
  .cta-strip h2{
    font-size:26px;
  }
  .cta-strip p{
    font-size:16px;
  }
  .cta-buttons{
    flex-direction:column;
    align-items:stretch;
  }
  .cta-btn-primary,
  .cta-btn-secondary{
    text-align:center;
  }
  .product-content{
    padding:56px 20px;
  }
  .product-intro h2{
    font-size:24px;
  }
  .product-intro p{
    font-size:16px;
  }
  .product-features{
    grid-template-columns:1fr;
    gap:18px;
  }
  .product-info{
    padding:32px 24px;
  }
  .product-list{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   ALT PRODUCT LAYOUT — Split layout for variety
   Used on some product pages to break the visual monotony.
   ============================================================ */

/* Split intro — two column with text on one side, image/panel on other */
.split-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  max-width:1100px;
  margin:0 auto 72px;
}
.split-intro-text h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:18px;
  letter-spacing:-.2px;
  line-height:1.25;
}
.split-intro-text p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:16px;
}
.split-intro-text p:last-child{
  margin-bottom:0;
}

/* Highlight panel — replaces the image side */
.highlight-panel{
  background:linear-gradient(135deg, var(--navy) 0%, var(--green-dark) 100%);
  border-radius:16px;
  padding:44px 40px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.highlight-panel::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-20%;
  width:280px;
  height:280px;
  background:rgba(255,255,255,.06);
  border-radius:50%;
}
.highlight-panel-label{
  display:inline-block;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:22px;
}
.highlight-panel h3{
  font-size:24px;
  font-weight:900;
  line-height:1.3;
  margin-bottom:16px;
  position:relative;
}
.highlight-panel p{
  font-size:15.5px;
  line-height:1.6;
  font-weight:600;
  opacity:.92;
  margin-bottom:26px;
  position:relative;
}
.highlight-panel-stat{
  display:flex;
  align-items:baseline;
  gap:12px;
  position:relative;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.2);
}
.highlight-panel-stat .big{
  font-size:38px;
  font-weight:900;
  line-height:1;
  color:#fff;
}
.highlight-panel-stat .small{
  font-size:14px;
  font-weight:700;
  opacity:.85;
  line-height:1.4;
}

/* Benefits list — replaces the standard product-info box */
.benefit-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 40px;
  max-width:1100px;
  margin:0 auto;
}
.benefit-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px 22px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:12px;
  transition:border-color .25s ease, transform .25s ease;
}
.benefit-item:hover{
  border-color:var(--green);
  transform:translateY(-2px);
}
.benefit-check{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--green);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}
.benefit-check svg{
  width:14px;
  height:14px;
  fill:#fff;
}
.benefit-text{
  font-size:15px;
  line-height:1.5;
  color:var(--text-dark);
  font-weight:700;
}

/* Section heading inside product-content */
.section-heading{
  text-align:center;
  max-width:720px;
  margin:0 auto 40px;
}
.section-heading h2{
  font-size:28px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  margin-bottom:12px;
}
.section-heading p{
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}

/* Responsive */
@media (max-width:1024px){
  .split-intro{
    grid-template-columns:1fr;
    gap:40px;
  }
  .benefit-list{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .split-intro-text h2{
    font-size:24px;
  }
  .highlight-panel{
    padding:32px 26px;
  }
  .highlight-panel h3{
    font-size:20px;
  }
  .highlight-panel-stat .big{
    font-size:30px;
  }
  .benefit-item{
    padding:16px 18px;
  }
  .section-heading h2{
    font-size:24px;
  }
}

/* ============================================================
   PATTERN 2 — "Feature Spotlight"
   Alternating large left/right rows. Used on product pages
   to break monotony every 4th page.
   ============================================================ */

.spotlight-intro{
  max-width:760px;
  margin:0 auto 72px;
  text-align:center;
}
.spotlight-intro h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:16px;
  letter-spacing:-.2px;
  line-height:1.25;
}
.spotlight-intro p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

.spotlight-rows{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:72px;
}

.spotlight-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

.spotlight-row.reverse .spotlight-visual{
  order:2;
}
.spotlight-row.reverse .spotlight-text{
  order:1;
}

.spotlight-visual{
  background:var(--cream);
  border-radius:16px;
  padding:56px 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
  position:relative;
  overflow:hidden;
}
.spotlight-visual::before{
  content:"";
  position:absolute;
  top:-30%;
  right:-20%;
  width:200px;
  height:200px;
  background:rgba(27,94,58,.08);
  border-radius:50%;
}
.spotlight-visual img{
  width:120px;
  height:120px;
  object-fit:contain;
  position:relative;
  z-index:1;
}

.spotlight-number{
  position:absolute;
  top:24px;
  left:32px;
  font-size:64px;
  font-weight:900;
  color:var(--navy);
  opacity:.08;
  line-height:1;
  z-index:0;
}

.spotlight-text h3{
  font-size:24px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:14px;
  letter-spacing:-.2px;
  line-height:1.3;
}
.spotlight-text p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

/* Responsive */
@media (max-width:1024px){
  .spotlight-row,
  .spotlight-row.reverse{
    grid-template-columns:1fr;
    gap:32px;
  }
  .spotlight-row.reverse .spotlight-visual,
  .spotlight-row.reverse .spotlight-text{
    order:initial;
  }
  .spotlight-rows{
    gap:56px;
  }
}
@media (max-width:640px){
  .spotlight-intro h2{
    font-size:24px;
  }
  .spotlight-intro p{
    font-size:16px;
  }
  .spotlight-visual{
    padding:40px 24px;
    min-height:220px;
  }
  .spotlight-visual img{
    width:90px;
    height:90px;
  }
  .spotlight-number{
    font-size:48px;
    top:16px;
    left:20px;
  }
  .spotlight-text h3{
    font-size:20px;
  }
}

/* ============================================================
   PATTERN 3 — "Comparison Grid"
   A richer version of the hub-page card grid with bigger cards,
   a comparison panel, and a two-column layout. Used every 4th
   product page to break rhythm.
   ============================================================ */

.compare-intro{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}
.compare-intro h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:16px;
  letter-spacing:-.2px;
  line-height:1.25;
}
.compare-intro p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

.compare-grid{
  max-width:1100px;
  margin:0 auto 56px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.compare-card{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:16px;
  padding:36px 30px 32px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.compare-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 36px rgba(15,48,87,.12);
  border-color:var(--green);
}
.compare-card.featured{
  border:2px solid var(--green);
  background:linear-gradient(180deg, #fdfdfb 0%, #f7f4ee 100%);
}
.compare-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:#fff;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:20px;
  white-space:nowrap;
}
.compare-card-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  border-radius:14px;
  margin-bottom:22px;
}
.compare-card.featured .compare-card-icon{
  background:#fff;
}
.compare-card-icon img{
  width:34px;
  height:34px;
  object-fit:contain;
}
.compare-card h3{
  font-size:20px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:10px;
  line-height:1.3;
}
.compare-card p{
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:22px;
  flex-grow:1;
}
.compare-price{
  font-size:26px;
  font-weight:900;
  color:var(--navy);
  line-height:1;
  margin-bottom:6px;
}
.compare-price .unit{
  font-size:14px;
  font-weight:700;
  color:var(--text-muted);
  margin-left:4px;
}
.compare-note{
  font-size:13.5px;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:22px;
}
.compare-features{
  list-style:none;
  margin:0 0 26px;
  padding:0;
}
.compare-features li{
  font-size:14.5px;
  line-height:1.55;
  color:var(--text-dark);
  font-weight:600;
  padding:8px 0 8px 26px;
  position:relative;
  border-bottom:1px solid var(--border-light);
}
.compare-features li:last-child{
  border-bottom:none;
}
.compare-features li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:16px;
  height:16px;
  background:var(--green);
  border-radius:50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>");
  background-size:cover;
}
.compare-btn{
  display:block;
  text-align:center;
  padding:13px 20px;
  border-radius:24px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  transition:all .2s ease;
  margin-top:auto;
}
.compare-btn-outline{
  background:#fff;
  color:var(--green-dark);
  border:1.5px solid var(--green);
}
.compare-btn-outline:hover{
  background:var(--green);
  color:#fff;
}
.compare-btn-solid{
  background:var(--green);
  color:#fff;
  border:1.5px solid var(--green);
}
.compare-btn-solid:hover{
  background:var(--green-dark);
  border-color:var(--green-dark);
}

/* Comparison footer note */
.compare-footnote{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  font-size:14px;
  color:var(--text-muted);
  font-weight:600;
  padding-top:24px;
  border-top:1px solid var(--border-light);
}

/* Responsive */
@media (max-width:1024px){
  .compare-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:640px){
  .compare-intro h2{
    font-size:24px;
  }
  .compare-intro p{
    font-size:16px;
  }
  .compare-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .compare-card{
    padding:32px 24px 28px;
  }
}

/* ============================================================
   PATTERN 4 — "Timeline / Steps"
   Numbered step-by-step walkthrough with connecting line.
   Used every 4th product page.
   ============================================================ */

.steps-intro{
  max-width:760px;
  margin:0 auto 64px;
  text-align:center;
}
.steps-intro h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:16px;
  letter-spacing:-.2px;
  line-height:1.25;
}
.steps-intro p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

.steps-list{
  max-width:820px;
  margin:0 auto;
  position:relative;
}

/* Vertical connector line */
.steps-list::before{
  content:"";
  position:absolute;
  left:29px;
  top:34px;
  bottom:34px;
  width:2px;
  background:linear-gradient(180deg, var(--green) 0%, var(--green) 85%, transparent 100%);
  opacity:.35;
}

.step-item{
  display:flex;
  align-items:flex-start;
  gap:32px;
  margin-bottom:48px;
  position:relative;
}
.step-item:last-child{
  margin-bottom:0;
}

.step-number{
  flex-shrink:0;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  color:var(--green-dark);
  position:relative;
  z-index:1;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.step-item:hover .step-number{
  transform:scale(1.08);
  background:var(--green);
  color:#fff;
}

.step-content{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:14px;
  padding:28px 32px;
  flex:1;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step-item:hover .step-content{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(15,48,87,.10);
  border-color:var(--green);
}
.step-content h3{
  font-size:20px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:10px;
  line-height:1.3;
}
.step-content p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--text-muted);
  font-weight:600;
}

/* Inline icon inside step content */
.step-inline-icon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:8px 14px;
  background:var(--cream);
  border-radius:20px;
  font-size:13.5px;
  font-weight:800;
  color:var(--green-dark);
}
.step-inline-icon img{
  width:20px;
  height:20px;
  object-fit:contain;
}

/* Responsive */
@media (max-width:640px){
  .steps-intro h2{
    font-size:24px;
  }
  .steps-intro p{
    font-size:16px;
  }
  .steps-list::before{
    left:24px;
  }
  .step-item{
    gap:20px;
    margin-bottom:32px;
  }
  .step-number{
    width:50px;
    height:50px;
    font-size:17px;
  }
  .step-content{
    padding:22px 22px;
  }
  .step-content h3{
    font-size:17px;
  }
  .step-content p{
    font-size:14.5px;
  }
}

/* ============================================================
   CREDIT CARD SHOWCASE
   Large hero-style section with card image + text on the left
   and a big card visual on the right. Used on credit card pages.
   ============================================================ */

.card-showcase{
  padding:80px 24px;
  background:linear-gradient(180deg, #faf8f3 0%, #ffffff 100%);
  position:relative;
  overflow:hidden;
}
.card-showcase::before{
  content:"";
  position:absolute;
  top:-100px;
  right:-100px;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(27,94,58,.06) 0%, transparent 70%);
  border-radius:50%;
}
.card-showcase-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:1;
}
.card-showcase-text h2{
  font-size:34px;
  font-weight:900;
  color:var(--navy);
  line-height:1.2;
  letter-spacing:-.3px;
  margin-bottom:18px;
}
.card-showcase-text p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:28px;
}
.card-showcase-cta{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:14px 32px;
  border-radius:24px;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  transition:background .2s ease;
}
.card-showcase-cta:hover{
  background:var(--green-dark);
}

.card-showcase-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.card-showcase-visual img{
  width:100%;
  max-width:420px;
  height:auto;
  filter:drop-shadow(0 24px 40px rgba(15,48,87,.18));
  transition:transform .4s ease;
}
.card-showcase-visual img:hover{
  transform:translateY(-6px) rotate(-1deg);
}

/* Responsive */
@media (max-width:1024px){
  .card-showcase-inner{
    grid-template-columns:1fr;
    gap:44px;
    text-align:center;
  }
  .card-showcase-text h2{
    font-size:28px;
  }
  .card-showcase-visual{
    min-height:auto;
  }
}
@media (max-width:640px){
  .card-showcase{
    padding:56px 20px;
  }
  .card-showcase-text h2{
    font-size:24px;
  }
  .card-showcase-text p{
    font-size:16px;
  }
}

/* ============================================================
   CREDIT CARD ROWS
   Three full-width cards stacked vertically. Each row has a
   card visual on one side and details on the other. Used on
   personal credit cards page.
   ============================================================ */

.cc-rows{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:40px;
}

.cc-row{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:18px;
  padding:44px 48px;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
  align-items:center;
  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.cc-row:hover{
  box-shadow:0 24px 48px rgba(15,48,87,.10);
  border-color:var(--green);
  transform:translateY(-3px);
}

/* Visual side */
.cc-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  position:relative;
}
.cc-visual img{
  width:100%;
  max-width:340px;
  height:auto;
  filter:drop-shadow(0 18px 32px rgba(15,48,87,.22));
  transition:transform .4s ease;
}
.cc-row:hover .cc-visual img{
  transform:translateY(-4px) rotate(-1deg);
}

/* Fallback "card" drawn in CSS if no image is present */
.cc-card-fallback{
  width:320px;
  height:200px;
  border-radius:16px;
  background:linear-gradient(135deg, #0f3057 0%, #134529 100%);
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 32px rgba(15,48,87,.22);
  padding:26px 28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
}
.cc-card-fallback::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-30%;
  width:220px;
  height:220px;
  background:rgba(255,255,255,.06);
  border-radius:50%;
}
.cc-card-fallback .cc-chip{
  width:38px;
  height:28px;
  border-radius:6px;
  background:linear-gradient(135deg, #d4b45f 0%, #a88a37 100%);
  position:relative;
}
.cc-card-fallback .cc-num{
  font-size:18px;
  letter-spacing:2px;
  font-weight:800;
  font-family:'Courier New', monospace;
  position:relative;
}
.cc-card-fallback .cc-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  position:relative;
}
.cc-card-fallback .cc-name{
  font-size:14px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.cc-card-fallback .cc-brand{
  font-size:16px;
  font-weight:900;
  letter-spacing:1px;
}

/* Details side */
.cc-details{
  display:flex;
  flex-direction:column;
}
.cc-positioning{
  display:inline-block;
  align-self:flex-start;
  background:var(--cream);
  color:var(--green-dark);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:16px;
}
.cc-details h3{
  font-size:26px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.3px;
  line-height:1.2;
  margin-bottom:10px;
}
.cc-details > p{
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:22px;
}

/* Actions */
.cc-actions{
  display:flex;
  gap:12px;
  margin-bottom:26px;
  flex-wrap:wrap;
}
.cc-btn-primary{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:12px 26px;
  border-radius:24px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  transition:background .2s ease;
}
.cc-btn-primary:hover{
  background:var(--green-dark);
}
.cc-btn-secondary{
  display:inline-block;
  background:#fff;
  color:var(--green-dark);
  border:1.5px solid var(--green);
  padding:11px 26px;
  border-radius:24px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  transition:background .2s ease;
}
.cc-btn-secondary:hover{
  background:var(--green);
  color:#fff;
}

/* Spec grid */
.cc-specs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px 28px;
  padding-top:22px;
  border-top:1px solid var(--border-light);
}
.cc-spec{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cc-spec-label{
  font-size:12.5px;
  font-weight:800;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.cc-spec-value{
  font-size:15px;
  font-weight:700;
  color:var(--text-dark);
  line-height:1.5;
}
.cc-spec-value.highlight{
  color:var(--green-dark);
  font-weight:800;
}
.cc-spec-full{
  grid-column:1 / -1;
}

/* Footnote */
.cc-footnote{
  max-width:1100px;
  margin:40px auto 0;
  padding-top:24px;
  border-top:1px solid var(--border-light);
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  text-align:center;
}

/* Responsive */
@media (max-width:1024px){
  .cc-row{
    grid-template-columns:1fr;
    gap:32px;
    padding:36px 32px;
    text-align:center;
  }
  .cc-visual{
    min-height:auto;
  }
  .cc-positioning{
    align-self:center;
  }
  .cc-actions{
    justify-content:center;
  }
}
@media (max-width:640px){
  .cc-row{
    padding:28px 22px;
  }
  .cc-details h3{
    font-size:22px;
  }
  .cc-specs{
    grid-template-columns:1fr;
    gap:16px;
  }
  .cc-card-fallback{
    width:100%;
    max-width:300px;
    height:180px;
  }
}

/* ============================================================
   PATTERN 5 — "Narrative Accordion"
   Full-width stacked rows with a large numbered tab on the left
   and content on the right, separated by a thin navy rule.
   Distinct from Patterns 1-4. Used for narrative/topic pages.
   ============================================================ */

.narrative-intro{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}
.narrative-intro h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:16px;
  letter-spacing:-.2px;
  line-height:1.25;
}
.narrative-intro p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

.narrative-list{
  max-width:1000px;
  margin:0 auto;
  border-top:1px solid var(--border-light);
}

.narrative-item{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:48px;
  padding:44px 0;
  border-bottom:1px solid var(--border-light);
  position:relative;
  transition:background .3s ease;
}
.narrative-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--green);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.narrative-item:hover::before{
  transform:scaleY(1);
}
.narrative-item:hover{
  background:linear-gradient(90deg, rgba(27,94,58,.035) 0%, transparent 60%);
}

.narrative-tab{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-left:20px;
}
.narrative-tab .num{
  font-size:52px;
  font-weight:900;
  color:var(--navy);
  line-height:1;
  letter-spacing:-1px;
  opacity:.9;
}
.narrative-tab .label{
  font-size:12px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--green-dark);
}

.narrative-content h3{
  font-size:23px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:14px;
  letter-spacing:-.2px;
  line-height:1.3;
}
.narrative-content p{
  font-size:16px;
  line-height:1.75;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:14px;
}
.narrative-content p:last-child{
  margin-bottom:0;
}

.narrative-content .narrative-close{
  display:inline-block;
  margin-top:16px;
  font-size:14.5px;
  font-weight:800;
  color:var(--green-dark);
  border-bottom:2px solid var(--green);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.narrative-content .narrative-close:hover{
  color:var(--green);
  border-color:var(--green-dark);
}

@media (max-width:1024px){
  .narrative-item{
    grid-template-columns:140px 1fr;
    gap:32px;
  }
  .narrative-tab .num{
    font-size:44px;
  }
}
@media (max-width:640px){
  .narrative-intro h2{
    font-size:24px;
  }
  .narrative-intro p{
    font-size:16px;
  }
  .narrative-item{
    grid-template-columns:1fr;
    gap:16px;
    padding:32px 0;
  }
  .narrative-tab{
    flex-direction:row;
    align-items:baseline;
    gap:14px;
    padding-left:16px;
  }
  .narrative-tab .num{
    font-size:36px;
  }
  .narrative-content h3{
    font-size:19px;
  }
  .narrative-content p{
    font-size:15px;
  }
}

/* ============================================================
   PATTERN 6 — "Document"
   Wide single-column layout for legal, regulatory, and text-heavy
   pages. No cards, no grid — a clean reading column with section
   headings, a table of contents, and a sticky sidebar (desktop only).
   Used for privacy notices, terms of use, CRA public file, etc.
   ============================================================ */

.document-wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:240px 1fr;
  gap:56px;
  align-items:start;
}

/* Table of contents — sticky on desktop */
.document-toc{
  position:sticky;
  top:32px;
  padding:28px 26px;
  background:var(--cream);
  border-radius:14px;
  border:1px solid var(--border-light);
}
.document-toc h4{
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:18px;
}
.document-toc ul{
  list-style:none;
  margin:0;
  padding:0;
}
.document-toc li{
  margin-bottom:12px;
}
.document-toc li:last-child{
  margin-bottom:0;
}
.document-toc a{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
  line-height:1.4;
  padding-left:12px;
  border-left:2px solid transparent;
  transition:color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.document-toc a:hover{
  color:var(--green-dark);
  border-left-color:var(--green);
  padding-left:16px;
}

/* Main document body */
.document-body{
  max-width:780px;
}
.document-body .document-meta{
  font-size:14px;
  font-weight:700;
  color:var(--text-muted);
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border-light);
}
.document-body h2{
  font-size:24px;
  font-weight:900;
  color:var(--navy);
  margin-top:48px;
  margin-bottom:16px;
  letter-spacing:-.2px;
  scroll-margin-top:32px;
}
.document-body h2:first-of-type{
  margin-top:0;
}
.document-body h3{
  font-size:18px;
  font-weight:900;
  color:var(--navy);
  margin-top:32px;
  margin-bottom:12px;
}
.document-body p{
  font-size:15.5px;
  line-height:1.8;
  color:var(--text-dark);
  font-weight:500;
  margin-bottom:18px;
}
.document-body ul{
  list-style:none;
  margin:0 0 22px;
  padding:0;
}
.document-body ul li{
  font-size:15.5px;
  line-height:1.7;
  color:var(--text-dark);
  font-weight:500;
  padding-left:26px;
  position:relative;
  margin-bottom:12px;
}
.document-body ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:8px;
  height:8px;
  background:var(--green);
  border-radius:50%;
}
.document-body a{
  color:var(--green-dark);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.document-body a:hover{
  color:var(--green);
}
.document-body .document-callout{
  background:var(--cream);
  border-left:4px solid var(--green);
  border-radius:0 10px 10px 0;
  padding:22px 26px;
  margin:28px 0;
}
.document-body .document-callout p{
  margin-bottom:0;
  font-weight:600;
}

@media (max-width:1024px){
  .document-wrap{
    grid-template-columns:1fr;
    gap:36px;
  }
  .document-toc{
    position:static;
  }
}
@media (max-width:640px){
  .document-wrap{
    padding:0 20px;
  }
  .document-body h2{
    font-size:20px;
    margin-top:36px;
  }
  .document-body h3{
    font-size:16px;
  }
  .document-body p,
  .document-body ul li{
    font-size:15px;
  }
  .document-toc{
    padding:22px 20px;
  }
}

/* ============================================================
   PATTERN 7 — "Split Visual"
   Large image box on the LEFT, content on the RIGHT.
   Mirrors Pattern 1 (which puts the panel on the right) so
   pages alternate which side the visual sits on.
   Used for ATM locator, branch finder, and map-style pages.
   ============================================================ */

.split-visual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  max-width:1100px;
  margin:0 auto 72px;
}

/* Visual — LEFT side */
.split-visual-media{
  border-radius:16px;
  overflow:hidden;
  background:var(--cream);
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 36px rgba(15,48,87,.10);
}
.split-visual-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.split-visual-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,48,87,0) 55%, rgba(15,48,87,.18) 100%);
  pointer-events:none;
}

/* Content — RIGHT side */
.split-visual-text h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:18px;
  letter-spacing:-.2px;
  line-height:1.25;
}
.split-visual-text p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:18px;
}
.split-visual-text p:last-of-type{
  margin-bottom:24px;
}

/* Quick-stat row under the text */
.split-visual-stats{
  display:flex;
  gap:32px;
  padding-top:22px;
  border-top:1px solid var(--border-light);
  margin-bottom:26px;
  flex-wrap:wrap;
}
.split-visual-stat .big{
  font-size:30px;
  font-weight:900;
  color:var(--green-dark);
  line-height:1;
  margin-bottom:6px;
}
.split-visual-stat .small{
  font-size:13.5px;
  font-weight:700;
  color:var(--text-muted);
  line-height:1.4;
}

/* Action links */
.split-visual-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

@media (max-width:1024px){
  .split-visual{
    grid-template-columns:1fr;
    gap:36px;
  }
  .split-visual-media{
    min-height:320px;
  }
  .split-visual-text h2{
    font-size:26px;
  }
}
@media (max-width:640px){
  .split-visual-media{
    min-height:240px;
  }
  .split-visual-text h2{
    font-size:22px;
  }
  .split-visual-stats{
    gap:22px;
  }
  .split-visual-stat .big{
    font-size:24px;
  }
}

/* ============================================================
   PATTERN 8 — "Action Hero"
   For conversion / signup pages. A wide editorial opening band
   with eyebrow label + headline + lead paragraph, a horizontal
   row of benefit pills, then a 3-column benefit grid, then a
   solid navy "start here" band with dual CTAs.
   Distinct from Patterns 1-7.
   ============================================================ */

.action-intro{
  max-width:820px;
  margin:0 auto 48px;
  text-align:left;
}
.action-eyebrow{
  display:inline-block;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--green-dark);
  background:var(--cream);
  padding:8px 16px;
  border-radius:20px;
  margin-bottom:22px;
}
.action-intro h2{
  font-size:36px;
  font-weight:900;
  color:var(--navy);
  line-height:1.2;
  letter-spacing:-.4px;
  margin-bottom:20px;
}
.action-intro p{
  font-size:17px;
  line-height:1.75;
  color:var(--text-muted);
  font-weight:600;
}

/* Horizontal benefit pills */
.action-pills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  max-width:1100px;
  margin:0 auto 64px;
  padding-bottom:40px;
  border-bottom:1px solid var(--border-light);
}
.action-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:30px;
  padding:12px 22px 12px 14px;
  font-size:14.5px;
  font-weight:800;
  color:var(--navy);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.action-pill:hover{
  border-color:var(--green);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(15,48,87,.08);
}
.action-pill .dot{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--green);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.action-pill .dot svg{
  width:14px;
  height:14px;
  fill:#fff;
}

/* 3-column benefit grid */
.action-grid{
  max-width:1100px;
  margin:0 auto 72px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.action-block{
  padding:32px 28px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:16px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.action-block:hover{
  border-color:var(--green);
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(15,48,87,.10);
}
.action-block .action-step{
  font-size:12.5px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:14px;
}
.action-block h3{
  font-size:19px;
  font-weight:900;
  color:var(--navy);
  line-height:1.3;
  margin-bottom:12px;
}
.action-block p{
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

/* Solid navy "start here" band */
.action-band{
  max-width:1100px;
  margin:0 auto;
  background:linear-gradient(135deg, var(--navy) 0%, var(--green-dark) 100%);
  border-radius:20px;
  padding:56px 56px;
  color:#fff;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.action-band::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-10%;
  width:340px;
  height:340px;
  background:rgba(255,255,255,.06);
  border-radius:50%;
}
.action-band h3{
  font-size:28px;
  font-weight:900;
  line-height:1.25;
  margin-bottom:12px;
  position:relative;
}
.action-band p{
  font-size:16px;
  line-height:1.65;
  font-weight:600;
  opacity:.9;
  position:relative;
}
.action-band-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  position:relative;
}
.action-band-actions .action-btn-primary{
  display:inline-block;
  background:#fff;
  color:var(--green-dark);
  padding:14px 30px;
  border-radius:24px;
  font-weight:800;
  font-size:15.5px;
  transition:background .2s ease, color .2s ease;
}
.action-band-actions .action-btn-primary:hover{
  background:var(--cream);
}
.action-band-actions .action-btn-secondary{
  display:inline-block;
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  padding:13px 30px;
  border-radius:24px;
  font-weight:800;
  font-size:15.5px;
  transition:border-color .2s ease, background .2s ease;
}
.action-band-actions .action-btn-secondary:hover{
  border-color:#fff;
  background:rgba(255,255,255,.10);
}

@media (max-width:1024px){
  .action-intro h2{
    font-size:30px;
  }
  .action-grid{
    grid-template-columns:1fr 1fr;
  }
  .action-band{
    grid-template-columns:1fr;
    gap:32px;
    padding:44px 40px;
    text-align:left;
  }
  .action-band-actions{
    justify-content:flex-start;
  }
}
@media (max-width:640px){
  .action-intro h2{
    font-size:24px;
  }
  .action-intro p{
    font-size:16px;
  }
  .action-pills{
    gap:10px;
    margin-bottom:48px;
  }
  .action-pill{
    font-size:13.5px;
    padding:10px 18px 10px 12px;
  }
  .action-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:56px;
  }
  .action-band{
    padding:36px 26px;
    border-radius:16px;
  }
  .action-band h3{
    font-size:22px;
  }
  .action-band-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .action-band-actions a{
    text-align:center;
  }
}

/* ============================================================
   PATTERN 9 — "Urgent Split"
   For time-sensitive / emergency pages (lost card, fraud alert,
   account lock). Content on the LEFT, image on the RIGHT.
   Includes a prominent red-accent alert bar at the top and a
   numbered "do this now" list instead of cards.
   Mirror of Pattern 7 (which puts the image on the left).
   ============================================================ */

/* Alert bar — sits above the split, full width of content inner */
.urgent-alert{
  max-width:1100px;
  margin:0 auto 48px;
  background:#fdf2ef;
  border:1px solid #f3d5cc;
  border-left:5px solid #b8442a;
  border-radius:12px;
  padding:20px 26px;
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.urgent-alert .urgent-alert-icon{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#b8442a;
  display:flex;
  align-items:center;
  justify-content:center;
}
.urgent-alert .urgent-alert-icon svg{
  width:20px;
  height:20px;
  fill:#fff;
}
.urgent-alert h3{
  font-size:16.5px;
  font-weight:900;
  color:#7a2c18;
  margin-bottom:6px;
  line-height:1.3;
}
.urgent-alert p{
  font-size:14.5px;
  line-height:1.6;
  color:#6b3a2a;
  font-weight:600;
  margin-bottom:0;
}

/* Split with image on the RIGHT */
.urgent-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}

/* Left side — content */
.urgent-text h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  line-height:1.25;
  letter-spacing:-.2px;
  margin-bottom:18px;
}
.urgent-text > p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:28px;
}

/* "Do this now" numbered list */
.urgent-actions{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:urgent;
}
.urgent-actions li{
  position:relative;
  padding:16px 0 16px 56px;
  border-top:1px solid var(--border-light);
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-dark);
  font-weight:700;
}
.urgent-actions li:last-child{
  border-bottom:1px solid var(--border-light);
}
.urgent-actions li::before{
  counter-increment:urgent;
  content:counter(urgent);
  position:absolute;
  left:0;
  top:16px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#b8442a;
  color:#fff;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}
.urgent-actions li strong{
  display:block;
  font-size:16px;
  color:var(--navy);
  font-weight:900;
  margin-bottom:4px;
}
.urgent-actions li span{
  display:block;
  font-size:14.5px;
  color:var(--text-muted);
  font-weight:600;
}

/* Right side — image */
.urgent-media{
  border-radius:16px;
  overflow:hidden;
  background:var(--cream);
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 36px rgba(15,48,87,.10);
}
.urgent-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Phone banner under the split */
.urgent-phone{
  max-width:1100px;
  margin:56px auto 0;
  background:var(--navy);
  color:#fff;
  border-radius:16px;
  padding:28px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.urgent-phone .urgent-phone-label{
  font-size:12.5px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:6px;
}
.urgent-phone .urgent-phone-number{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.3px;
  line-height:1.1;
}
.urgent-phone .urgent-phone-note{
  font-size:14px;
  font-weight:600;
  opacity:.8;
  margin-top:6px;
}
.urgent-phone a.urgent-phone-btn{
  display:inline-block;
  background:#fff;
  color:var(--navy);
  padding:14px 30px;
  border-radius:24px;
  font-weight:800;
  font-size:15.5px;
  transition:background .2s ease;
}
.urgent-phone a.urgent-phone-btn:hover{
  background:var(--cream);
}

@media (max-width:1024px){
  .urgent-split{
    grid-template-columns:1fr;
    gap:36px;
  }
  .urgent-media{
    min-height:300px;
    order:-1;
  }
  .urgent-text h2{
    font-size:26px;
  }
  .urgent-phone{
    flex-direction:column;
    align-items:flex-start;
    padding:26px 28px;
  }
}
@media (max-width:640px){
  .urgent-alert{
    padding:18px 20px;
  }
  .urgent-alert h3{
    font-size:15.5px;
  }
  .urgent-alert p{
    font-size:14px;
  }
  .urgent-text h2{
    font-size:22px;
  }
  .urgent-actions li{
    padding:14px 0 14px 48px;
    font-size:14.5px;
  }
  .urgent-actions li::before{
    width:30px;
    height:30px;
    font-size:14px;
  }
  .urgent-media{
    min-height:220px;
  }
  .urgent-phone .urgent-phone-number{
    font-size:22px;
  }
  .urgent-phone a.urgent-phone-btn{
    width:100%;
    text-align:center;
  }
}

/* ============================================================
   PATTERN 10 — "Story"
   Editorial layout for About Us narrative pages. Large lead
   image band at top, pull-quote strip, then a two-column body
   with a vertical milestone rail on the left and story text
   on the right. Footer signature block. Distinct from 1-9.
   ============================================================ */

/* Lead image band */
.story-lead{
  max-width:1100px;
  margin:0 auto 56px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:var(--cream);
  min-height:380px;
  box-shadow:0 20px 40px rgba(15,48,87,.12);
}
.story-lead img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
}
.story-lead-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(180deg, rgba(15,48,87,0) 0%, rgba(15,48,87,.85) 100%);
  color:#fff;
  padding:64px 36px 30px;
  z-index:2;
}
.story-lead-caption h2{
  font-size:26px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.2px;
  margin-bottom:8px;
}
.story-lead-caption p{
  font-size:15px;
  line-height:1.5;
  font-weight:600;
  opacity:.9;
}

/* Pull quote strip */
.story-quote{
  max-width:900px;
  margin:0 auto 64px;
  text-align:center;
  padding:0 24px;
}
.story-quote blockquote{
  font-size:26px;
  font-weight:800;
  color:var(--navy);
  line-height:1.4;
  letter-spacing:-.2px;
  position:relative;
  padding:0 48px;
}
.story-quote blockquote::before,
.story-quote blockquote::after{
  font-size:70px;
  font-weight:900;
  color:var(--green);
  line-height:1;
  position:absolute;
  opacity:.55;
}
.story-quote blockquote::before{
  content:"\201C";
  top:-8px;
  left:0;
}
.story-quote blockquote::after{
  content:"\201D";
  bottom:-28px;
  right:0;
}
.story-quote cite{
  display:block;
  margin-top:26px;
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--green-dark);
  font-style:normal;
}

/* Two-column story body: milestone rail + narrative */
.story-body{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:56px;
  align-items:start;
}
.story-milestones{
  position:sticky;
  top:32px;
}
.story-milestones h4{
  font-size:13px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:22px;
}
.story-milestones ul{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.story-milestones ul::before{
  content:"";
  position:absolute;
  left:6px;
  top:10px;
  bottom:10px;
  width:2px;
  background:var(--border-light);
}
.story-milestones li{
  position:relative;
  padding-left:32px;
  margin-bottom:22px;
  font-size:14px;
  font-weight:700;
  color:var(--text-muted);
  line-height:1.5;
}
.story-milestones li::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--green);
  z-index:1;
}
.story-milestones li .year{
  display:block;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:4px;
}

.story-narrative h2{
  font-size:28px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  line-height:1.3;
  margin-bottom:18px;
}
.story-narrative h2:not(:first-of-type){
  margin-top:48px;
}
.story-narrative p{
  font-size:16.5px;
  line-height:1.8;
  color:var(--text-dark);
  font-weight:500;
  margin-bottom:20px;
}
.story-narrative p:first-of-type::first-letter{
  font-size:56px;
  font-weight:900;
  color:var(--green-dark);
  float:left;
  line-height:.9;
  padding:6px 12px 0 0;
}

/* Signature block */
.story-signature{
  max-width:1100px;
  margin:56px auto 0;
  padding-top:32px;
  border-top:1px solid var(--border-light);
  display:flex;
  align-items:center;
  gap:22px;
}
.story-signature .sig-line{
  width:44px;
  height:3px;
  background:var(--green);
  flex-shrink:0;
}
.story-signature p{
  font-size:15px;
  font-weight:700;
  color:var(--text-muted);
  font-style:italic;
  line-height:1.5;
  margin:0;
}

@media (max-width:1024px){
  .story-body{
    grid-template-columns:1fr;
    gap:36px;
  }
  .story-milestones{
    position:static;
  }
  .story-milestones ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 24px;
  }
  .story-milestones ul::before{
    display:none;
  }
  .story-quote blockquote{
    font-size:22px;
    padding:0 36px;
  }
}
@media (max-width:640px){
  .story-lead{
    min-height:280px;
    border-radius:14px;
  }
  .story-lead-caption{
    padding:48px 22px 22px;
  }
  .story-lead-caption h2{
    font-size:20px;
  }
  .story-lead-caption p{
    font-size:14px;
  }
  .story-quote blockquote{
    font-size:18px;
    padding:0 28px;
  }
  .story-quote blockquote::before,
  .story-quote blockquote::after{
    font-size:48px;
  }
  .story-quote cite{
    font-size:12.5px;
  }
  .story-narrative h2{
    font-size:22px;
  }
  .story-narrative p{
    font-size:15.5px;
  }
  .story-narrative p:first-of-type::first-letter{
    font-size:44px;
  }
  .story-milestones ul{
    grid-template-columns:1fr;
  }
  .story-signature{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
}

/* ============================================================
   PATTERN 11 — "Team Grid"
   For leadership, board, and team pages. Portrait-format cards
   in a responsive grid, each with a photo slot, name, title,
   short bio, and optional contact row. Uses a subtle card lift
   and accent bar on hover. Distinct from Patterns 1-10.
   ============================================================ */

.team-intro{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}
.team-intro h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  margin-bottom:16px;
  letter-spacing:-.2px;
  line-height:1.25;
}
.team-intro p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

.team-grid{
  max-width:1100px;
  margin:0 auto 56px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.team-card{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative;
}
.team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px rgba(15,48,87,.12);
  border-color:var(--green);
}
.team-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.team-card:hover::after{
  transform:scaleX(1);
}

.team-photo{
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--cream);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.team-photo .team-initials{
  font-size:64px;
  font-weight:900;
  color:var(--navy);
  opacity:.35;
  letter-spacing:-2px;
}

.team-info{
  padding:26px 26px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.team-info .team-role{
  display:inline-block;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:10px;
}
.team-info h3{
  font-size:20px;
  font-weight:900;
  color:var(--navy);
  line-height:1.25;
  letter-spacing:-.2px;
  margin-bottom:4px;
}
.team-info .team-title{
  font-size:14px;
  font-weight:700;
  color:var(--text-muted);
  margin-bottom:16px;
}
.team-info p.team-bio{
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:22px;
  flex:1;
}
.team-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid var(--border-light);
}
.team-actions a{
  font-size:13.5px;
  font-weight:800;
  color:var(--green-dark);
  padding:8px 16px;
  border:1.5px solid var(--green);
  border-radius:20px;
  transition:background .2s ease, color .2s ease;
}
.team-actions a:hover{
  background:var(--green);
  color:#fff;
}

/* Board-member variant: smaller, no action buttons */
.team-grid.team-board .team-info h3{
  font-size:18px;
}
.team-grid.team-board .team-info p.team-bio{
  font-size:14px;
  margin-bottom:12px;
}

/* Footnote */
.team-footnote{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  font-size:14px;
  color:var(--text-muted);
  font-weight:600;
  padding-top:24px;
  border-top:1px solid var(--border-light);
}

@media (max-width:1024px){
  .team-grid{
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
}
@media (max-width:640px){
  .team-intro h2{
    font-size:24px;
  }
  .team-intro p{
    font-size:16px;
  }
  .team-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .team-info{
    padding:22px 22px 20px;
  }
  .team-photo .team-initials{
    font-size:52px;
  }
}

/* Team Grid — no-photo variant.
   Use .team-grid.team-no-photo when cards should skip the
   square photo area entirely and show only text content. */
.team-grid.team-no-photo .team-photo{
  display:none;
}
.team-grid.team-no-photo .team-info{
  padding:32px 28px 28px;
}
.team-grid.team-no-photo .team-info h3{
  font-size:22px;
  margin-bottom:6px;
}
.team-grid.team-no-photo .team-info p.team-bio{
  margin-bottom:0;
}

/* Team Grid — circle-photo variant.
   Use .team-grid.team-circle when cards should show a round
   portrait at the top instead of a square photo. Portrait
   size, spacing, and centering are handled here so the page
   only needs a plain <img> tag. */
.team-grid.team-circle .team-card{
  text-align:center;
  padding:36px 26px 30px;
}
.team-grid.team-circle .team-photo{
  width:140px;
  height:140px;
  aspect-ratio:auto;
  border-radius:50%;
  margin:0 auto 22px;
  background:var(--cream);
  overflow:hidden;
  flex-shrink:0;
}
.team-grid.team-circle .team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.team-grid.team-circle .team-info{
  padding:0;
  align-items:center;
}
.team-grid.team-circle .team-info h3{
  font-size:20px;
  margin-bottom:6px;
  text-align:center;
}
.team-grid.team-circle .team-info .team-title{
  font-size:14px;
  text-align:center;
  margin-bottom:0;
}
.team-grid.team-circle .team-card::after{
  display:none;
}
@media (max-width:640px){
  .team-grid.team-circle .team-card{
    padding:28px 22px 24px;
  }
  .team-grid.team-circle .team-photo{
    width:120px;
    height:120px;
  }
}

/* ============================================================
   PATTERN 12 — "Careers Split List"
   Two-column layout with a sticky "why work here" panel on the
   left and a stack of job-listing rows on the right. Each job
   row has a title, meta line, short description, and Apply
   button. Used for Careers / Open Positions pages.
   Distinct from Patterns 1-11.
   ============================================================ */

.careers-wrap{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
  align-items:start;
}

/* Left sticky panel */
.careers-side{
  position:sticky;
  top:32px;
  background:var(--cream);
  border:1px solid var(--border-light);
  border-radius:16px;
  padding:36px 32px;
}
.careers-side h3{
  font-size:22px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  line-height:1.3;
  margin-bottom:18px;
}
.careers-side p{
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:24px;
}
.careers-side-stats{
  padding-top:22px;
  border-top:1px solid var(--border-light);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.careers-side-stat .big{
  font-size:26px;
  font-weight:900;
  color:var(--green-dark);
  line-height:1;
  margin-bottom:6px;
}
.careers-side-stat .small{
  font-size:13.5px;
  font-weight:700;
  color:var(--text-muted);
  line-height:1.45;
}

/* Right job list */
.careers-list-head{
  margin-bottom:32px;
}
.careers-list-head h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  line-height:1.25;
  margin-bottom:12px;
}
.careers-list-head p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

.careers-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.careers-row{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:14px;
  padding:28px 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  position:relative;
}
.careers-row:hover{
  border-color:var(--green);
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(15,48,87,.10);
}
.careers-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:14px 0 0 14px;
  background:var(--green);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.careers-row:hover::before{
  transform:scaleY(1);
}
.careers-row-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.careers-row-head h3{
  font-size:20px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  line-height:1.3;
  margin-bottom:6px;
}
.careers-row-meta{
  font-size:13.5px;
  font-weight:800;
  color:var(--green-dark);
  letter-spacing:.4px;
  text-transform:uppercase;
}
.careers-row p{
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}
.careers-row-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}
.careers-apply{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:11px 26px;
  border-radius:24px;
  font-weight:800;
  font-size:14.5px;
  text-decoration:none;
  transition:background .2s ease;
}
.careers-apply:hover{
  background:var(--green-dark);
}
.careers-detail{
  display:inline-block;
  background:#fff;
  color:var(--green-dark);
  border:1.5px solid var(--green);
  padding:10px 26px;
  border-radius:24px;
  font-weight:800;
  font-size:14.5px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.careers-detail:hover{
  background:var(--green);
  color:#fff;
}

.careers-empty{
  padding:40px 34px;
  background:var(--cream);
  border-radius:14px;
  border:1px dashed var(--border-light);
  text-align:center;
}
.careers-empty p{
  font-size:15.5px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

@media (max-width:1024px){
  .careers-wrap{
    grid-template-columns:1fr;
    gap:36px;
  }
  .careers-side{
    position:static;
  }
  .careers-list-head h2{
    font-size:26px;
  }
}
@media (max-width:640px){
  .careers-side{
    padding:28px 24px;
  }
  .careers-side h3{
    font-size:19px;
  }
  .careers-list-head h2{
    font-size:22px;
  }
  .careers-list-head p{
    font-size:15.5px;
  }
  .careers-row{
    padding:22px 22px;
  }
  .careers-row-head h3{
    font-size:17px;
  }
  .careers-row p{
    font-size:14.5px;
  }
  .careers-apply,
  .careers-detail{
    flex:1;
    text-align:center;
  }
}

/* ============================================================
   PATTERN 13 — "Newsroom"
   Editorial press/news layout. A large featured story at the
   top (image left, text right), then a two-column body: a
   stacked list of article rows on the left and a sticky media
   sidebar on the right. Used for Newsroom / Press pages.
   Distinct from Patterns 1-12.
   ============================================================ */

/* Featured story */
.news-feature{
  max-width:1120px;
  margin:0 auto 64px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:18px;
  padding:40px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.news-feature:hover{
  border-color:var(--green);
  box-shadow:0 22px 44px rgba(15,48,87,.10);
}
.news-feature-media{
  border-radius:14px;
  overflow:hidden;
  background:var(--cream);
  min-height:300px;
  position:relative;
}
.news-feature-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
}
.news-feature-text .news-kicker{
  display:inline-block;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--green-dark);
  background:var(--cream);
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:16px;
}
.news-feature-text h2{
  font-size:28px;
  font-weight:900;
  color:var(--navy);
  line-height:1.25;
  letter-spacing:-.3px;
  margin-bottom:14px;
}
.news-feature-text p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:22px;
}
.news-feature-meta{
  font-size:13.5px;
  font-weight:700;
  color:var(--text-muted);
  margin-bottom:18px;
}
.news-feature-meta strong{
  color:var(--green-dark);
  font-weight:900;
}

/* Two-column body */
.news-body{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:56px;
  align-items:start;
}

/* List of news items */
.news-list-head{
  font-size:13px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--green-dark);
  padding-bottom:16px;
  border-bottom:2px solid var(--border-light);
  margin-bottom:8px;
}
.news-list{
  display:flex;
  flex-direction:column;
}
.news-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;
  padding:28px 0;
  border-bottom:1px solid var(--border-light);
  align-items:start;
  transition:background .25s ease;
}
.news-row:hover{
  background:linear-gradient(90deg, rgba(27,94,58,.03) 0%, transparent 70%);
}
.news-row-date{
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--text-muted);
  padding-top:4px;
}
.news-row-date .y{
  display:block;
  font-size:20px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  margin-top:2px;
}
.news-row-content .news-kicker{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:8px;
}
.news-row-content h3{
  font-size:19px;
  font-weight:900;
  color:var(--navy);
  line-height:1.35;
  letter-spacing:-.2px;
  margin-bottom:8px;
  transition:color .2s ease;
}
.news-row:hover .news-row-content h3{
  color:var(--green-dark);
}
.news-row-content p{
  font-size:15px;
  line-height:1.65;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:12px;
}
.news-row-link{
  font-size:14px;
  font-weight:800;
  color:var(--green-dark);
}
.news-row-link::after{
  content:" \2192";
  display:inline-block;
  transition:transform .25s ease;
}
.news-row:hover .news-row-link::after{
  transform:translateX(4px);
}

/* Sidebar */
.news-side{
  position:sticky;
  top:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.news-side-card{
  background:var(--cream);
  border:1px solid var(--border-light);
  border-radius:16px;
  padding:30px 28px;
}
.news-side-card h4{
  font-size:12.5px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:16px;
}
.news-side-card h3{
  font-size:19px;
  font-weight:900;
  color:var(--navy);
  line-height:1.35;
  margin-bottom:12px;
}
.news-side-card p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:16px;
}
.news-side-card p:last-child{
  margin-bottom:0;
}
.news-side-card a{
  font-size:14.5px;
  font-weight:800;
  color:var(--green-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.news-side-card a:hover{
  color:var(--green);
}
.news-side-list{
  list-style:none;
  margin:0;
  padding:0;
}
.news-side-list li{
  padding:12px 0;
  border-bottom:1px solid var(--border-light);
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
  transition:color .2s ease, padding-left .2s ease;
}
.news-side-list li:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.news-side-list li:first-child{
  padding-top:0;
}
.news-side-list li:hover{
  color:var(--green-dark);
  padding-left:6px;
}

@media (max-width:1024px){
  .news-feature{
    grid-template-columns:1fr;
    gap:32px;
    padding:32px;
  }
  .news-feature-media{
    min-height:260px;
  }
  .news-body{
    grid-template-columns:1fr;
    gap:40px;
  }
  .news-side{
    position:static;
  }
}
@media (max-width:640px){
  .news-feature{
    padding:24px 22px;
    border-radius:14px;
  }
  .news-feature-text h2{
    font-size:22px;
  }
  .news-feature-text p{
    font-size:15px;
  }
  .news-row{
    grid-template-columns:1fr;
    gap:12px;
    padding:22px 0;
  }
  .news-row-date .y{
    font-size:17px;
  }
  .news-row-content h3{
    font-size:17px;
  }
  .news-row-content p{
    font-size:14.5px;
  }
  .news-side-card{
    padding:24px 22px;
  }
}

/* ============================================================
   CONTACT FORM
   Styled form layout for the contact page. Two-column grid for
   shorter fields (name / email / phone / customer), full-width
   rows for the message and dropdown, inline consent checkbox,
   and a prominent submit button. Matches the site's existing
   card, border, and green-button language.
   ============================================================ */

.contact-wrap{
  max-width:920px;
  margin:0 auto;
}

.contact-intro{
  text-align:center;
  max-width:720px;
  margin:0 auto 40px;
}
.contact-intro h2{
  font-size:30px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  line-height:1.25;
  margin-bottom:14px;
}
.contact-intro p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
}

/* Alert / instructions box above the form */
.contact-alert{
  background:#fdf6ee;
  border:1px solid #f0e0c8;
  border-left:5px solid #b8842a;
  border-radius:12px;
  padding:22px 26px;
  margin-bottom:36px;
}
.contact-alert p{
  font-size:14.5px;
  line-height:1.7;
  color:#6b5330;
  font-weight:600;
  margin-bottom:0;
}
.contact-alert a{
  color:#7a4d10;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.contact-alert a:hover{
  color:#5a3808;
}

/* The form itself */
.contact-form{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:16px;
  padding:44px 44px 40px;
}
.contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 28px;
  margin-bottom:22px;
}
.contact-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-field.full{
  grid-column:1 / -1;
}
.contact-field label{
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--navy);
}
.contact-field label .required{
  color:#b8442a;
  margin-left:2px;
}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field select,
.contact-field textarea{
  width:100%;
  border:1px solid var(--border-light);
  border-radius:10px;
  padding:13px 16px;
  font-size:15px;
  font-family:inherit;
  color:var(--text-dark);
  font-weight:600;
  background:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(27,94,58,.10);
}
.contact-field textarea{
  min-height:150px;
  resize:vertical;
  line-height:1.6;
}
.contact-field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%230f3057' d='M4 6l4 4 4-4z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:16px;
  padding-right:44px;
  cursor:pointer;
}

/* Radio group: Are you an Alpine Bank customer? */
.contact-radios{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:4px;
}
.contact-radio{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border:1.5px solid var(--border-light);
  border-radius:30px;
  font-size:14.5px;
  font-weight:800;
  color:var(--navy);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
  user-select:none;
}
.contact-radio:hover{
  border-color:var(--green);
}
.contact-radio input[type="radio"]{
  appearance:none;
  width:18px;
  height:18px;
  border:2px solid var(--border-light);
  border-radius:50%;
  margin:0;
  position:relative;
  cursor:pointer;
  transition:border-color .2s ease;
  flex-shrink:0;
}
.contact-radio input[type="radio"]:checked{
  border-color:var(--green);
}
.contact-radio input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--green);
}
.contact-radio:has(input:checked){
  border-color:var(--green);
  background:rgba(27,94,58,.06);
  color:var(--green-dark);
}

/* Consent checkbox line */
.contact-consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:20px 0 26px;
  border-top:1px solid var(--border-light);
  margin-top:14px;
  font-size:14px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}
.contact-consent input[type="checkbox"]{
  appearance:none;
  width:20px;
  height:20px;
  border:2px solid var(--border-light);
  border-radius:5px;
  margin:2px 0 0;
  cursor:pointer;
  flex-shrink:0;
  position:relative;
  transition:border-color .2s ease, background .2s ease;
}
.contact-consent input[type="checkbox"]:checked{
  background:var(--green);
  border-color:var(--green);
}
.contact-consent input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:6px;
  height:11px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.contact-consent a{
  color:var(--green-dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.contact-consent a:hover{
  color:var(--green);
}

/* Submit row */
.contact-submit-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.contact-submit{
  display:inline-block;
  background:var(--green);
  color:#fff;
  border:none;
  padding:15px 42px;
  border-radius:28px;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  font-family:inherit;
}
.contact-submit:hover{
  background:var(--green-dark);
  transform:translateY(-1px);
}
.contact-submit-note{
  font-size:13.5px;
  color:var(--text-muted);
  font-weight:600;
}

/* Responsive */
@media (max-width:640px){
  .contact-form{
    padding:30px 24px 28px;
  }
  .contact-form-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .contact-intro h2{
    font-size:24px;
  }
  .contact-intro p{
    font-size:15.5px;
  }
  .contact-alert{
    padding:18px 20px;
  }
  .contact-radios{
    gap:10px;
  }
  .contact-radio{
    padding:10px 18px;
    font-size:13.5px;
  }
  .contact-submit{
    width:100%;
    text-align:center;
    padding:15px 24px;
  }
  .contact-submit-row{
    flex-direction:column;
    align-items:stretch;
  }
  .contact-submit-note{
    text-align:center;
  }
}

/* ============================================================
   AUTH PAGES PATTERN
   Centered card layout for login, enroll, and other account
   access pages.
   ============================================================ */

.auth-section{
  background:var(--cream);
  padding:72px 24px 88px;
}
.auth-wrap{
  max-width:520px;
  margin:0 auto;
}
.auth-card{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:18px;
  padding:44px 42px 36px;
  box-shadow:0 12px 32px rgba(15,48,87,.06);
}
.auth-head{
  text-align:center;
  margin-bottom:32px;
}
.auth-head h1{
  font-size:28px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.3px;
  line-height:1.25;
  margin-bottom:10px;
}
.auth-head p{
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}
.auth-form .auth-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
}
.auth-form .auth-field label{
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--navy);
}
.auth-form .auth-field input{
  width:100%;
  border:1px solid var(--border-light);
  border-radius:10px;
  padding:14px 18px;
  font-size:15px;
  font-family:inherit;
  color:var(--text-dark);
  font-weight:600;
  background:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.auth-form .auth-field input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(27,94,58,.10);
}
.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 24px;
  flex-wrap:wrap;
  gap:12px;
}
.auth-remember{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
  color:var(--text-muted);
  cursor:pointer;
  user-select:none;
}
.auth-remember input[type="checkbox"]{
  appearance:none;
  width:18px;
  height:18px;
  border:2px solid var(--border-light);
  border-radius:5px;
  margin:0;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:border-color .2s ease, background .2s ease;
}
.auth-remember input[type="checkbox"]:checked{
  background:var(--green);
  border-color:var(--green);
}
.auth-remember input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.auth-forgot{
  font-size:14px;
  font-weight:800;
  color:var(--green-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.auth-forgot:hover{
  color:var(--green);
}
.auth-submit{
  display:block;
  width:100%;
  background:var(--green);
  color:#fff;
  border:none;
  padding:15px 24px;
  border-radius:28px;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  font-family:inherit;
}
.auth-submit:hover{
  background:var(--green-dark);
  transform:translateY(-1px);
}
.auth-alt{
  text-align:center;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--border-light);
  font-size:14.5px;
  font-weight:600;
  color:var(--text-muted);
}
.auth-alt a{
  color:var(--green-dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.auth-alt a:hover{
  color:var(--green);
}
.auth-help{
  margin-top:22px;
  padding:18px 22px;
  background:var(--cream);
  border-radius:12px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}
.auth-help strong{
  color:var(--navy);
  font-weight:900;
  display:block;
  margin-bottom:4px;
}
.auth-help a{
  color:var(--green-dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media (max-width:640px){
  .auth-section{
    padding:48px 20px 64px;
  }
  .auth-card{
    padding:32px 24px 28px;
    border-radius:14px;
  }
  .auth-head h1{
    font-size:23px;
  }
  .auth-head p{
    font-size:14.5px;
  }
}

/* ============================================================
   SPLIT AUTH PATTERN
   Two-column login/enroll layout. Left side is a full-height
   brand panel with an image background, tagline, and bullet
   list of benefits. Right side is the white form area. Used
   for login.php and enroll.php. Distinct from the centered
   Auth pattern (which this replaces).
   ============================================================ */

.split-auth{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:640px;
  background:#fff;
}

/* LEFT — brand panel */
.split-auth-brand{
  background-image:linear-gradient(135deg, rgba(15,48,87,.82) 0%, rgba(19,69,41,.75) 100%), url('/alpine-bank/images/alpine-online.png');
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:72px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.split-auth-brand::before{
  content:"";
  position:absolute;
  top:-15%;
  right:-20%;
  width:420px;
  height:420px;
  background:rgba(255,255,255,.05);
  border-radius:50%;
}
.split-auth-brand::after{
  content:"";
  position:absolute;
  bottom:-20%;
  left:-15%;
  width:340px;
  height:340px;
  background:rgba(255,255,255,.04);
  border-radius:50%;
}
.split-auth-brand-inner{
  position:relative;
  z-index:1;
  max-width:420px;
}
.split-auth-brand .split-auth-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#c8e6d6;
  background:rgba(255,255,255,.12);
  padding:7px 16px;
  border-radius:20px;
  margin-bottom:22px;
}
.split-auth-brand h2{
  font-size:34px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.4px;
  margin-bottom:18px;
}
.split-auth-brand p{
  font-size:16px;
  line-height:1.7;
  font-weight:600;
  opacity:.9;
  margin-bottom:32px;
}
.split-auth-brand ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.split-auth-brand ul li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  opacity:.95;
}
.split-auth-brand ul li svg{
  flex-shrink:0;
  width:20px;
  height:20px;
  fill:#c8e6d6;
  margin-top:2px;
}

/* RIGHT — form side */
.split-auth-form{
  padding:72px 56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.split-auth-form-inner{
  width:100%;
  max-width:420px;
}
.split-auth-form-inner h1{
  font-size:28px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.3px;
  line-height:1.25;
  margin-bottom:10px;
}
.split-auth-form-inner > p{
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:32px;
}

.split-auth-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
}
.split-auth-field label{
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--navy);
}
.split-auth-field input{
  width:100%;
  border:1px solid var(--border-light);
  border-radius:10px;
  padding:14px 18px;
  font-size:15px;
  font-family:inherit;
  color:var(--text-dark);
  font-weight:600;
  background:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.split-auth-field input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(27,94,58,.10);
}

.split-auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 24px;
  flex-wrap:wrap;
  gap:12px;
}
.split-auth-remember{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
  color:var(--text-muted);
  cursor:pointer;
  user-select:none;
}
.split-auth-remember input[type="checkbox"]{
  appearance:none;
  width:18px;
  height:18px;
  border:2px solid var(--border-light);
  border-radius:5px;
  margin:0;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:border-color .2s ease, background .2s ease;
}
.split-auth-remember input[type="checkbox"]:checked{
  background:var(--green);
  border-color:var(--green);
}
.split-auth-remember input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.split-auth-forgot{
  font-size:14px;
  font-weight:800;
  color:var(--green-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.split-auth-forgot:hover{
  color:var(--green);
}

.split-auth-submit{
  display:block;
  width:100%;
  background:var(--green);
  color:#fff;
  border:none;
  padding:15px 24px;
  border-radius:28px;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  font-family:inherit;
}
.split-auth-submit:hover{
  background:var(--green-dark);
  transform:translateY(-1px);
}

.split-auth-alt{
  text-align:center;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--border-light);
  font-size:14.5px;
  font-weight:600;
  color:var(--text-muted);
}
.split-auth-alt a{
  color:var(--green-dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.split-auth-alt a:hover{
  color:var(--green);
}

.split-auth-help{
  margin-top:22px;
  padding:18px 22px;
  background:var(--cream);
  border-radius:12px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}
.split-auth-help strong{
  color:var(--navy);
  font-weight:900;
  display:block;
  margin-bottom:4px;
}
.split-auth-help a{
  color:var(--green-dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:1024px){
  .split-auth-brand{
    padding:56px 40px;
  }
  .split-auth-brand h2{
    font-size:28px;
  }
  .split-auth-form{
    padding:56px 40px;
  }
}
@media (max-width:768px){
  .split-auth{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .split-auth-brand{
    padding:48px 32px;
  }
  .split-auth-brand h2{
    font-size:24px;
  }
  .split-auth-brand p{
    margin-bottom:24px;
  }
  .split-auth-form{
    padding:48px 32px;
  }
}
@media (max-width:640px){
  .split-auth-brand{
    padding:40px 24px;
  }
  .split-auth-brand h2{
    font-size:22px;
  }
  .split-auth-form{
    padding:36px 24px;
  }
  .split-auth-form-inner h1{
    font-size:23px;
  }
}

/* ============================================================
   HIDE LOGIN BUTTON ON AUTH PAGES
   Used on login.php and enroll.php where the header Login
   button and dropdown would be redundant (user is already on
   the login / signup screen). Does not affect any other page.
   ============================================================ */

body.auth-page .login-wrap{
  display:none;
}

@media (max-width:640px){
  body.auth-page .mobile-login{
    display:none;
  }
}

/* ============================================================
   ENROLL FORM PATTERN
   Wide centered registration layout. A hero band at the top
   (image + intro), then a single card containing the form
   broken into labeled sections. Each section has a heading
   and a two-column field grid. File uploads styled as drop
   boxes. Ends with consent checkboxes and a submit button.
   Used for enroll.php only. Distinct from Split Auth.
   ============================================================ */

.enroll-section{
  background:var(--cream);
  padding:72px 24px 96px;
}

.enroll-wrap{
  max-width:1040px;
  margin:0 auto;
}

/* Top intro band — image on left, text on right */
.enroll-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  margin-bottom:56px;
}
.enroll-intro-media{
  border-radius:16px;
  overflow:hidden;
  background:var(--cream);
  min-height:280px;
  position:relative;
  box-shadow:0 18px 36px rgba(15,48,87,.10);
}
.enroll-intro-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
}
.enroll-intro-text h1{
  font-size:32px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.3px;
  line-height:1.2;
  margin-bottom:16px;
}
.enroll-intro-text p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:20px;
}
.enroll-intro-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.enroll-intro-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
  line-height:1.5;
}
.enroll-intro-list li svg{
  flex-shrink:0;
  width:18px;
  height:18px;
  fill:var(--green);
  margin-top:2px;
}

/* The form card */
.enroll-card{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:18px;
  padding:48px 48px 40px;
  box-shadow:0 12px 32px rgba(15,48,87,.06);
}

/* Sections inside the form */
.enroll-section-block{
  padding-bottom:36px;
  margin-bottom:36px;
  border-bottom:1px solid var(--border-light);
}
.enroll-section-block:last-of-type{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
.enroll-section-head{
  margin-bottom:24px;
}
.enroll-section-head .enroll-step{
  display:inline-block;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:8px;
}
.enroll-section-head h2{
  font-size:21px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  line-height:1.3;
  margin-bottom:6px;
}
.enroll-section-head p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}

/* Field grid — two columns */
.enroll-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
}
.enroll-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.enroll-field.full{
  grid-column:1 / -1;
}
.enroll-field label{
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--navy);
}
.enroll-field label .required{
  color:#b8442a;
  margin-left:2px;
}
.enroll-field input[type="text"],
.enroll-field input[type="email"],
.enroll-field input[type="tel"],
.enroll-field input[type="password"],
.enroll-field input[type="date"],
.enroll-field select,
.enroll-field textarea{
  width:100%;
  border:1px solid var(--border-light);
  border-radius:10px;
  padding:13px 16px;
  font-size:15px;
  font-family:inherit;
  color:var(--text-dark);
  font-weight:600;
  background:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.enroll-field input:focus,
.enroll-field select:focus,
.enroll-field textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(27,94,58,.10);
}
.enroll-field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%230f3057' d='M4 6l4 4 4-4z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:16px;
  padding-right:44px;
  cursor:pointer;
}

/* File upload drop box */
.enroll-upload{
  border:1.5px dashed var(--border-light);
  border-radius:12px;
  padding:22px 24px;
  text-align:center;
  background:var(--cream);
  transition:border-color .2s ease, background .2s ease;
  cursor:pointer;
  position:relative;
}
.enroll-upload:hover{
  border-color:var(--green);
  background:#fff;
}
.enroll-upload input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
}
.enroll-upload-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--green);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
}
.enroll-upload-icon svg{
  width:20px;
  height:20px;
  fill:#fff;
}
.enroll-upload-title{
  font-size:14.5px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:4px;
}
.enroll-upload-hint{
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
}

/* Consent checkboxes */
.enroll-consent-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:28px;
}
.enroll-consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  line-height:1.65;
  color:var(--text-muted);
  font-weight:600;
  cursor:pointer;
}
.enroll-consent input[type="checkbox"]{
  appearance:none;
  width:20px;
  height:20px;
  border:2px solid var(--border-light);
  border-radius:5px;
  margin:2px 0 0;
  cursor:pointer;
  flex-shrink:0;
  position:relative;
  transition:border-color .2s ease, background .2s ease;
}
.enroll-consent input[type="checkbox"]:checked{
  background:var(--green);
  border-color:var(--green);
}
.enroll-consent input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:6px;
  height:11px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.enroll-consent a{
  color:var(--green-dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.enroll-consent a:hover{
  color:var(--green);
}

/* Submit row */
.enroll-submit-row{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding-top:8px;
}
.enroll-submit{
  display:inline-block;
  background:var(--green);
  color:#fff;
  border:none;
  padding:16px 46px;
  border-radius:28px;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  font-family:inherit;
}
.enroll-submit:hover{
  background:var(--green-dark);
  transform:translateY(-1px);
}
.enroll-submit-note{
  font-size:13.5px;
  color:var(--text-muted);
  font-weight:600;
}
.enroll-alt{
  text-align:center;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--border-light);
  font-size:14.5px;
  font-weight:600;
  color:var(--text-muted);
}
.enroll-alt a{
  color:var(--green-dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.enroll-alt a:hover{
  color:var(--green);
}

@media (max-width:1024px){
  .enroll-intro{
    grid-template-columns:1fr;
    gap:32px;
  }
  .enroll-intro-media{
    min-height:240px;
  }
  .enroll-card{
    padding:40px 32px 34px;
  }
}
@media (max-width:640px){
  .enroll-section{
    padding:48px 20px 64px;
  }
  .enroll-intro-text h1{
    font-size:24px;
  }
  .enroll-intro-text p{
    font-size:15.5px;
  }
  .enroll-card{
    padding:30px 22px 26px;
    border-radius:14px;
  }
  .enroll-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .enroll-section-head h2{
    font-size:18px;
  }
  .enroll-submit{
    width:100%;
    text-align:center;
    padding:15px 24px;
  }
  .enroll-submit-row{
    flex-direction:column;
    align-items:stretch;
  }
  .enroll-submit-note{
    text-align:center;
  }
}

/* ============================================================
   SEARCH PAGE PATTERN
   Minimal centered search layout. A hero band, a large search
   input with a submit button, then a results area. Also shows
   a "popular pages" grid when there are no results yet.
   Used for search.php only.
   ============================================================ */

.search-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--green-dark) 100%);
  color:#fff;
  padding:72px 24px 64px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.search-hero::before{
  content:"";
  position:absolute;
  top:-30%;
  right:-15%;
  width:400px;
  height:400px;
  background:rgba(255,255,255,.05);
  border-radius:50%;
}
.search-hero-inner{
  max-width:760px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.search-hero h1{
  font-size:36px;
  font-weight:900;
  letter-spacing:-.4px;
  line-height:1.2;
  margin-bottom:14px;
}
.search-hero p{
  font-size:16.5px;
  line-height:1.6;
  font-weight:600;
  opacity:.9;
  margin-bottom:36px;
}

/* The search bar */
.search-bar{
  display:flex;
  background:#fff;
  border-radius:32px;
  padding:6px;
  box-shadow:0 18px 40px rgba(15,48,87,.20);
  max-width:600px;
  margin:0 auto;
}
.search-bar input{
  flex:1;
  border:none;
  background:transparent;
  padding:14px 22px;
  font-size:16px;
  font-family:inherit;
  color:var(--text-dark);
  font-weight:600;
  outline:none;
}
.search-bar input::placeholder{
  color:#8a8a85;
}
.search-bar button{
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:26px;
  padding:14px 32px;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  transition:background .2s ease;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.search-bar button:hover{
  background:var(--green-dark);
}
.search-bar button svg{
  width:16px;
  height:16px;
  fill:#fff;
}

/* Results area */
.search-results-section{
  background:var(--cream);
  padding:64px 24px 88px;
}
.search-results-wrap{
  max-width:960px;
  margin:0 auto;
}
.search-results-head{
  margin-bottom:32px;
}
.search-results-head h2{
  font-size:22px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  margin-bottom:8px;
}
.search-results-head p{
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
}

/* Result rows */
.search-result-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.search-result{
  display:block;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:14px;
  padding:24px 28px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.search-result:hover{
  border-color:var(--green);
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(15,48,87,.08);
}
.search-result-tag{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:8px;
}
.search-result h3{
  font-size:18px;
  font-weight:900;
  color:var(--navy);
  line-height:1.35;
  margin-bottom:8px;
  transition:color .2s ease;
}
.search-result:hover h3{
  color:var(--green-dark);
}
.search-result p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-muted);
  font-weight:600;
}

/* Popular pages (shown before searching) */
.search-popular h2{
  font-size:20px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.2px;
  margin-bottom:6px;
}
.search-popular > p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:26px;
}
.search-popular-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.search-popular-link{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:12px;
  padding:18px 22px;
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  transition:border-color .25s ease, transform .25s ease, color .25s ease;
}
.search-popular-link:hover{
  border-color:var(--green);
  color:var(--green-dark);
  transform:translateY(-2px);
}
.search-popular-link::before{
  content:"\2192";
  color:var(--green);
  font-weight:900;
  flex-shrink:0;
}

@media (max-width:640px){
  .search-hero{
    padding:48px 20px 44px;
  }
  .search-hero h1{
    font-size:26px;
  }
  .search-hero p{
    font-size:15.5px;
  }
  .search-bar{
    flex-direction:column;
    border-radius:16px;
    padding:8px;
  }
  .search-bar input{
    padding:12px 18px;
    text-align:center;
  }
  .search-bar button{
    border-radius:12px;
    justify-content:center;
    padding:13px 24px;
  }
  .search-results-section{
    padding:48px 20px 64px;
  }
  .search-popular-grid{
    grid-template-columns:1fr;
  }
}

/* Search hero — image background with color overlay.
   Overrides the gradient-only .search-hero defined earlier. */
.search-hero{
  background-image:linear-gradient(135deg, rgba(15,48,87,.82) 0%, rgba(19,69,41,.72) 100%), url('/alpine-bank/images/about.png');
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:72px 24px 64px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* ============================================================
   FIX — Hide desktop header on mobile, show mobile header only.
   This rule forces the correct behavior regardless of whether
   an earlier media query block closed properly.
   ============================================================ */

/* On desktop and tablet: hide the mobile header */
@media (min-width:641px){
  .mobile-header,
  .mobile-menu-panel{
    display:none !important;
  }
}

/* On mobile: hide the desktop header and nav */
@media (max-width:640px){
  header.site-header,
  header.desktop-header,
  nav.main-nav{
    display:none !important;
  }
  .mobile-header{
    display:flex !important;
  }
}

/* ============================================================
   SMALL SCREEN — max-width 360px
   Tightens spacing, typography, and controls for the smallest
   common phone widths (iPhone SE, small Androids, ~360px).
   Loaded after all other rules so it wins on tiny screens.
   ============================================================ */

@media (max-width:360px){

  /* ---------- Global ---------- */
  body{
    font-size:15px;
  }
  .wrap{
    padding:0 16px;
  }

  /* ---------- FDIC bar ---------- */
  .fdic-bar{
    font-size:11.5px;
    padding:7px 12px;
  }

  /* ---------- Mobile header ---------- */
  .mobile-header{
    padding:12px 14px;
  }
  .mobile-logo img{
    height:32px;
  }
  .mobile-logo-text .brand{
    font-size:16px;
  }
  .mobile-logo-text .member{
    font-size:9.5px;
  }
  .mobile-login svg{
    width:17px;
    height:17px;
  }
  .mobile-login span{
    font-size:10.5px;
  }
  .mobile-menu-toggle svg{
    width:20px;
    height:20px;
  }
  .mobile-menu-toggle span{
    font-size:11px;
  }
  .mobile-menu-panel li a{
    padding:14px 14px;
    font-size:15px;
  }
  .mobile-menu-footer{
    padding:14px 14px 18px;
  }
  .mobile-menu-footer a{
    font-size:14px;
  }

  /* ---------- Homepage hero ---------- */
  .hero{
    min-height:420px;
  }
  .hero-content{
    padding:0 16px;
  }
  .hero-card{
    padding:26px 22px;
    border-radius:14px;
  }
  .hero-card h1{
    font-size:22px;
    line-height:1.3;
    margin-bottom:14px;
  }
  .hero-card p{
    font-size:14px;
    line-height:1.55;
  }

  /* ---------- Homepage icon strip ---------- */
  .icon-strip{
    padding:36px 16px 30px;
    gap:14px;
  }
  .icon-item .icon-circle img{
    width:56px;
    height:56px;
  }
  .icon-item span{
    font-size:12.5px;
    max-width:120px;
  }

  /* ---------- Homepage promo cards ---------- */
  .promo-section{
    padding:0 16px;
    margin-bottom:48px;
    gap:16px;
  }
  .promo-card{
    padding:22px 22px 0;
    min-height:190px;
  }
  .promo-card.tall{
    min-height:230px;
  }
  .promo-card h3{
    font-size:18px;
    margin-bottom:12px;
    max-width:100%;
  }
  .promo-btn{
    font-size:13.5px;
    padding:9px 18px;
  }

  /* ---------- Business section ---------- */
  .biz-section{
    padding:16px 16px 44px;
  }
  .biz-section h2{
    font-size:24px;
  }
  .biz-section p{
    font-size:15px;
  }
  .biz-cards{
    padding:0 16px;
    margin-bottom:52px;
    gap:16px;
  }
  .biz-card{
    padding:26px 22px 24px;
  }
  .biz-card img{
    width:56px;
    height:56px;
    margin-bottom:14px;
  }
  .biz-card h3{
    font-size:17px;
  }
  .biz-card p{
    font-size:13.5px;
    min-height:auto;
  }
  .biz-btn{
    font-size:13.5px;
    padding:10px 20px;
  }

  /* ---------- Community section ---------- */
  .community-section{
    padding:0 16px;
    margin-bottom:52px;
    gap:20px;
  }
  .community-text h2{
    font-size:20px;
  }
  .community-text p{
    font-size:14.5px;
  }
  .stat-card{
    padding:22px 20px;
    gap:14px;
  }
  .stat-card img{
    width:56px;
    height:56px;
  }
  .stat-card .num{
    font-size:32px;
  }
  .stat-card p{
    font-size:13.5px;
  }

  /* ---------- Footer ---------- */
  footer{
    padding:40px 16px 24px;
  }
  .footer-grid{
    gap:24px;
    margin-bottom:36px;
  }
  .footer-col h4{
    font-size:16px;
  }
  .footer-col a{
    font-size:14px;
    margin-bottom:12px;
  }
  .footer-search{
    max-width:100%;
  }
  .social-icons a{
    width:36px;
    height:36px;
  }
  .social-icons a svg{
    width:18px;
    height:18px;
  }
  .footer-brand img{
    height:36px;
  }
  .footer-legal{
    font-size:12.5px;
  }
  .footer-badges img{
    height:32px;
  }
  .footer-links-row{
    gap:14px;
    font-size:12.5px;
  }

  /* ---------- Page hero (inner pages) ---------- */
  .page-hero{
    min-height:260px;
  }
  .page-hero-inner{
    padding:28px 16px;
  }
  .page-hero-card{
    padding:26px 22px;
    border-radius:14px;
  }
  .breadcrumb{
    font-size:12.5px;
    gap:6px;
    margin-bottom:12px;
  }
  .page-hero h1{
    font-size:22px;
    margin-bottom:10px;
  }
  .page-hero p{
    font-size:14px;
    line-height:1.55;
  }

  /* ---------- Hub grid ---------- */
  .page-grid{
    padding:40px 16px;
  }
  .page-card{
    padding:26px 22px 24px;
  }
  .page-card-icon{
    width:54px;
    height:54px;
    margin-bottom:16px;
  }
  .page-card-icon img{
    width:34px;
    height:34px;
  }
  .page-card h3{
    font-size:17px;
  }
  .page-card p{
    font-size:14px;
    margin-bottom:16px;
  }
  .page-card-link{
    font-size:14px;
  }

  /* ---------- CTA strip ---------- */
  .cta-strip{
    padding:44px 16px;
  }
  .cta-strip h2{
    font-size:22px;
  }
  .cta-strip p{
    font-size:14.5px;
    margin-bottom:24px;
  }
  .cta-btn-primary,
  .cta-btn-secondary{
    padding:13px 24px;
    font-size:15px;
  }

  /* ---------- Product content ---------- */
  .product-content{
    padding:44px 16px;
  }
  .product-intro{
    margin-bottom:40px;
  }
  .product-intro h2{
    font-size:21px;
  }
  .product-intro p{
    font-size:14.5px;
  }
  .product-feature{
    padding:22px 20px;
  }
  .product-feature h3{
    font-size:16.5px;
  }
  .product-feature p{
    font-size:14px;
  }
  .product-info{
    padding:26px 20px;
  }
  .product-info h2{
    font-size:20px;
  }
  .product-list li{
    font-size:14.5px;
  }

  /* ---------- Pattern 1 — Split Intro ---------- */
  .split-intro-text h2{
    font-size:21px;
  }
  .highlight-panel{
    padding:26px 22px;
  }
  .highlight-panel h3{
    font-size:18px;
  }
  .highlight-panel-stat .big{
    font-size:26px;
  }
  .benefit-item{
    padding:16px 16px;
  }
  .benefit-text{
    font-size:14px;
  }
  .section-heading h2{
    font-size:21px;
  }

  /* ---------- Pattern 2 — Spotlight ---------- */
  .spotlight-intro h2{
    font-size:21px;
  }
  .spotlight-visual{
    padding:32px 20px;
    min-height:190px;
  }
  .spotlight-visual img{
    width:80px;
    height:80px;
  }
  .spotlight-number{
    font-size:42px;
    top:14px;
    left:16px;
  }
  .spotlight-text h3{
    font-size:18px;
  }
  .spotlight-text p{
    font-size:14.5px;
  }

  /* ---------- Pattern 3 — Compare grid ---------- */
  .compare-intro h2{
    font-size:21px;
  }
  .compare-intro p{
    font-size:14.5px;
  }
  .compare-card{
    padding:26px 20px 24px;
  }
  .compare-card h3{
    font-size:18px;
  }
  .compare-price{
    font-size:22px;
  }
  .compare-features li{
    font-size:13.5px;
  }
  .compare-btn{
    padding:12px 18px;
    font-size:14px;
  }
  .compare-footnote{
    font-size:13px;
  }

  /* ---------- Pattern 4 — Steps ---------- */
  .steps-intro h2{
    font-size:21px;
  }
  .steps-list::before{
    left:20px;
  }
  .step-item{
    gap:16px;
  }
  .step-number{
    width:44px;
    height:44px;
    font-size:15px;
  }
  .step-content{
    padding:20px 18px;
  }
  .step-content h3{
    font-size:16px;
  }
  .step-content p{
    font-size:14px;
  }
  .step-inline-icon{
    font-size:12.5px;
    padding:7px 12px;
  }

  /* ---------- Pattern 5 — Narrative ---------- */
  .narrative-intro h2{
    font-size:21px;
  }
  .narrative-intro p{
    font-size:14.5px;
  }
  .narrative-item{
    padding:26px 0;
  }
  .narrative-tab{
    padding-left:12px;
    gap:10px;
  }
  .narrative-tab .num{
    font-size:30px;
  }
  .narrative-tab .label{
    font-size:10.5px;
    letter-spacing:.9px;
  }
  .narrative-content h3{
    font-size:17px;
  }
  .narrative-content p{
    font-size:14px;
  }

  /* ---------- Pattern 6 — Document ---------- */
  .document-wrap{
    padding:0 16px;
  }
  .document-toc{
    padding:20px 18px;
  }
  .document-toc h4{
    font-size:12px;
  }
  .document-toc a{
    font-size:13.5px;
  }
  .document-body h2{
    font-size:19px;
    margin-top:32px;
  }
  .document-body h3{
    font-size:15.5px;
  }
  .document-body p,
  .document-body ul li{
    font-size:14.5px;
  }
  .document-body .document-callout{
    padding:18px 20px;
  }

  /* ---------- Pattern 7 — Split Visual ---------- */
  .split-visual{
    gap:28px;
    margin-bottom:52px;
  }
  .split-visual-media{
    min-height:200px;
  }
  .split-visual-text h2{
    font-size:20px;
  }
  .split-visual-text p{
    font-size:14.5px;
  }
  .split-visual-stat .big{
    font-size:22px;
  }
  .split-visual-stat .small{
    font-size:12.5px;
  }

  /* ---------- Pattern 8 — Action Hero ---------- */
  .action-intro h2{
    font-size:22px;
  }
  .action-intro p{
    font-size:14.5px;
  }
  .action-eyebrow{
    font-size:11.5px;
    padding:7px 14px;
  }
  .action-pill{
    font-size:12.5px;
    padding:9px 16px 9px 10px;
  }
  .action-pill .dot{
    width:22px;
    height:22px;
  }
  .action-block{
    padding:26px 22px;
  }
  .action-block h3{
    font-size:16.5px;
  }
  .action-block p{
    font-size:14px;
  }
  .action-band{
    padding:30px 22px;
    border-radius:14px;
  }
  .action-band h3{
    font-size:20px;
  }
  .action-band p{
    font-size:14.5px;
  }

  /* ---------- Pattern 9 — Urgent Split ---------- */
  .urgent-alert{
    padding:16px 18px;
    gap:12px;
  }
  .urgent-alert .urgent-alert-icon{
    width:30px;
    height:30px;
  }
  .urgent-alert h3{
    font-size:14.5px;
  }
  .urgent-alert p{
    font-size:13px;
  }
  .urgent-text h2{
    font-size:20px;
  }
  .urgent-actions li{
    padding:12px 0 12px 44px;
    font-size:14px;
  }
  .urgent-actions li::before{
    width:28px;
    height:28px;
    font-size:13px;
  }
  .urgent-actions li strong{
    font-size:15px;
  }
  .urgent-actions li span{
    font-size:13px;
  }
  .urgent-media{
    min-height:190px;
  }
  .urgent-phone{
    padding:22px 20px;
  }
  .urgent-phone .urgent-phone-number{
    font-size:20px;
  }
  .urgent-phone .urgent-phone-note{
    font-size:13px;
  }

  /* ---------- Pattern 10 — Story ---------- */
  .story-lead{
    min-height:230px;
    border-radius:12px;
  }
  .story-lead-caption{
    padding:40px 18px 18px;
  }
  .story-lead-caption h2{
    font-size:17px;
  }
  .story-lead-caption p{
    font-size:12.5px;
  }
  .story-quote blockquote{
    font-size:16px;
    padding:0 22px;
  }
  .story-quote blockquote::before,
  .story-quote blockquote::after{
    font-size:40px;
  }
  .story-quote cite{
    font-size:11.5px;
    margin-top:20px;
  }
  .story-narrative h2{
    font-size:19px;
  }
  .story-narrative p{
    font-size:14.5px;
  }
  .story-narrative p:first-of-type::first-letter{
    font-size:38px;
    padding:4px 10px 0 0;
  }
  .story-milestones h4{
    font-size:12px;
  }
  .story-milestones li{
    font-size:13px;
  }
  .story-signature p{
    font-size:13.5px;
  }

  /* ---------- Pattern 11 — Team ---------- */
  .team-intro h2{
    font-size:21px;
  }
  .team-intro p{
    font-size:14.5px;
  }
  .team-info{
    padding:20px 18px 18px;
  }
  .team-info h3{
    font-size:17px;
  }
  .team-info .team-title{
    font-size:13px;
  }
  .team-info p.team-bio{
    font-size:13.5px;
  }
  .team-grid.team-circle .team-card{
    padding:24px 20px 20px;
  }
  .team-grid.team-circle .team-photo{
    width:100px;
    height:100px;
    margin-bottom:16px;
  }
  .team-grid.team-no-photo .team-info{
    padding:24px 20px 22px;
  }
  .team-grid.team-no-photo .team-info h3{
    font-size:18px;
  }
  .team-footnote{
    font-size:13px;
  }

  /* ---------- Pattern 12 — Careers ---------- */
  .careers-side{
    padding:24px 20px;
  }
  .careers-side h3{
    font-size:17px;
  }
  .careers-side p{
    font-size:14px;
  }
  .careers-side-stat .big{
    font-size:22px;
  }
  .careers-side-stat .small{
    font-size:12.5px;
  }
  .careers-list-head h2{
    font-size:20px;
  }
  .careers-list-head p{
    font-size:14.5px;
  }
  .careers-row{
    padding:20px 18px;
  }
  .careers-row-head h3{
    font-size:16px;
  }
  .careers-row-meta{
    font-size:12px;
  }
  .careers-row p{
    font-size:14px;
  }
  .careers-apply,
  .careers-detail{
    font-size:13.5px;
    padding:10px 20px;
  }

  /* ---------- Pattern 13 — Newsroom ---------- */
  .news-feature{
    padding:20px 18px;
    border-radius:12px;
  }
  .news-feature-text h2{
    font-size:19px;
  }
  .news-feature-text p{
    font-size:14px;
  }
  .news-feature-meta{
    font-size:12.5px;
  }
  .news-list-head{
    font-size:12px;
  }
  .news-row{
    padding:18px 0;
  }
  .news-row-date .y{
    font-size:15px;
  }
  .news-row-content h3{
    font-size:15.5px;
  }
  .news-row-content p{
    font-size:13.5px;
  }
  .news-side-card{
    padding:20px 18px;
  }
  .news-side-card h3{
    font-size:17px;
  }
  .news-side-card p{
    font-size:13.5px;
  }
  .news-side-list li{
    font-size:13.5px;
  }

  /* ---------- Contact form ---------- */
  .contact-form{
    padding:24px 18px 22px;
  }
  .contact-intro h2{
    font-size:21px;
  }
  .contact-intro p{
    font-size:14.5px;
  }
  .contact-alert{
    padding:16px 18px;
  }
  .contact-alert p{
    font-size:13.5px;
  }
  .contact-radio{
    padding:9px 16px;
    font-size:13px;
  }
  .contact-submit{
    font-size:15px;
    padding:14px 20px;
  }

  /* ---------- Split Auth (login) ---------- */
  .split-auth-brand{
    padding:36px 20px;
  }
  .split-auth-brand h2{
    font-size:20px;
  }
  .split-auth-brand p{
    font-size:14px;
  }
  .split-auth-brand ul li{
    font-size:13.5px;
  }
  .split-auth-form{
    padding:32px 20px;
  }
  .split-auth-form-inner h1{
    font-size:21px;
  }
  .split-auth-field input{
    padding:12px 16px;
    font-size:14.5px;
  }
  .split-auth-submit{
    font-size:15px;
    padding:14px 20px;
  }
  .split-auth-help{
    padding:16px 18px;
    font-size:12.5px;
  }

  /* ---------- Enroll form ---------- */
  .enroll-section{
    padding:40px 16px 56px;
  }
  .enroll-intro-text h1{
    font-size:21px;
  }
  .enroll-intro-text p{
    font-size:14.5px;
  }
  .enroll-intro-list li{
    font-size:13.5px;
  }
  .enroll-card{
    padding:26px 18px 22px;
  }
  .enroll-section-head h2{
    font-size:17px;
  }
  .enroll-section-head p{
    font-size:13.5px;
  }
  .enroll-field label{
    font-size:12px;
  }
  .enroll-field input,
  .enroll-field select,
  .enroll-field textarea{
    padding:12px 14px;
    font-size:14.5px;
  }
  .enroll-upload{
    padding:18px 18px;
  }
  .enroll-upload-title{
    font-size:13.5px;
  }
  .enroll-upload-hint{
    font-size:12px;
  }
  .enroll-consent{
    font-size:13px;
  }
  .enroll-submit{
    font-size:15px;
    padding:14px 20px;
  }
  .enroll-alt{
    font-size:13.5px;
  }

  /* ---------- Search ---------- */
  .search-hero{
    padding:40px 16px 36px;
  }
  .search-hero h1{
    font-size:22px;
  }
  .search-hero p{
    font-size:14px;
    margin-bottom:26px;
  }
  .search-bar input{
    padding:12px 16px;
    font-size:14.5px;
  }
  .search-bar button{
    padding:12px 20px;
    font-size:14px;
  }
  .search-results-section{
    padding:40px 16px 52px;
  }
  .search-popular h2{
    font-size:18px;
  }
  .search-popular > p{
    font-size:13.5px;
  }
  .search-popular-link{
    font-size:14px;
    padding:16px 18px;
  }
}