/* /assets/css/terpcomm.css */
@charset "utf-8";

    /* =========================================================
       TERPCOMM BRAND TOKENS
       - Comm blue as #263b8c
       - Darken Terp red #c61f3a
       - black and white as interpreter neutrals
    ========================================================= */

  :root{
    --tc-red: #c61f3a;        /* darker red */
    --tc-red-bright: #ef3755; /* lighter red for hover accents */
    --tc-blue: #263b8c;    
       
    --tc-card: #fff;	  
	  
    --tc-border: #e7e9f2;
    --tc-shadow: 0 10px 26px rgba(0,0,0,.08);
    --tc-radius: 16px;  
	  
    --tc-black: #0b0f14;
    --tc-ink: #111;
    --tc-muted: #818181;
    --tc-bg-soft: #f6f7fb;
	--tc-bg: #f6f7fb;
    --tc-card: #fff;

    --tc-radius-lg: 20px;
    --tc-radius-xl: 28px;

    --tc-max: 1180px;
    --tc-pill: 999px;
	  
	  
  }

  * { box-sizing:border-box; margin:0; padding:0; font-family: Lexend, Arial, sans-serif; }
  html { scroll-behavior:smooth; }
  html, body { height:100%; }
  body { background: var(--tc-bg-soft); color: var(--tc-ink); }

  a { color: inherit; text-decoration:none; }
  img { max-width:100%; display:block; }

    /* =========================================================
       PAGE LAYOUT
    ========================================================= */

  .page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  .container{
    width:100%;
    max-width: var(--tc-max);
    margin:0 auto;
    padding: 0 1.5rem;
  }

    /* =========================================================
       HEADER
    ========================================================= */
  .nav{
    position: fixed;
    top:0;
    width:100%;
    z-index:1000;
    background: linear-gradient(to bottom, rgba(11,15,20,.78), transparent);
    padding: 1.05rem 0;
    transition:
      background-color .35s ease,
      background .35s ease,
      padding .35s ease,
      box-shadow .35s ease,
      backdrop-filter .35s ease;
  }
  .nav.scrolled{
    background: rgba(11,15,20,.9);
    backdrop-filter: blur(10px);
    padding: .6rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 1rem;
  }
  .nav-left{
    display:flex;
    align-items:center;
    gap: .8rem;
    min-width: 220px;
  }
  .brand-logo{
    display:flex;
    align-items:center;
    gap: .7rem;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap: 1.8rem;
    color:#fff;
  }
  .nav-link{
    position:relative;
    font-weight:700;
    font-size:.95rem;
    color:#fff;
    opacity: .92;
  }
  .nav-link:hover{ opacity: 1; }
  .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-.25rem;
    height:3px;
    width:0;
    border-radius: 999px;
    transition: width .22s ease;
  }
  .nav-link--home::after     { background-color: var(--tc-red); }
  .nav-link--support::after  { background-color: #ffffff; }
  .nav-link--contact::after  { background-color: var(--tc-blue); }
  .nav-link:hover::after,
  .nav-link.nav-link--active::after{
    width:100%;
  }
  .nav-cta{
    display:flex;
    align-items:center;
    gap: .8rem;
  }
  .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: .7rem 1.4rem;
    font-size: .95rem;
    font-weight: 800;
    border-radius: var(--tc-pill);
    border: 0;
    cursor:pointer;
    color:#fff !important;
    background: linear-gradient(120deg, var(--tc-red), #9f162c);
    box-shadow: 0 14px 30px rgba(198,31,58,.35);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    white-space:nowrap;
  }
  .button:hover{
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(38,59,140,.25);
    filter: brightness(1.05);
    background: linear-gradient(120deg, var(--tc-red), var(--tc-blue));
  }
  .button:active{
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  @media (max-width: 900px){
    .nav-links{ display:none; }
    .nav-left{ min-width:auto; }
  }
  @media (max-width: 480px){
    .nav{ padding:.75rem 0; }
    .nav.scrolled{ padding:.55rem 0; }
    .button{ padding:.6rem 1.1rem; font-size:.88rem; }
  }

  .main{
    padding-top: 72px;
    flex: 1 0 auto;
  }

    /* =========================================================
       TERMS AND POLICY PAGES LAYOUT + TYPOGRAPHY
    ========================================================= */
    .page-frame{
      padding: 3.5rem 0 4.5rem;
/*      background: linear-gradient(to bottom, #ffffff 0%, var(--tc-bg) 40%, #ffffff 100%);*/
    }

    #payment .page-frame{
      padding: 0 !important;
      background: none !important;
    }

    .wrap{
      display:flex;
      justify-content:center;
    }

    .card{
      background: var(--tc-card);
      border-radius: var(--tc-radius);
      box-shadow: var(--tc-shadow);
      border: 1px solid var(--tc-border);
      padding: 2.5rem 2.4rem 2.75rem;
      max-width: 900px;
      width:100%;
    }

    @media (max-width: 768px){
      .card{
        padding: 1.9rem 1.6rem 2.1rem;
      }
    }

    /* Typography inside main content */
    .main h1{
      font-size: 2.1rem;
      line-height: 1.15;
      margin-bottom: .6rem;
      color: var(--tc-blue);
      letter-spacing: 0.01em;
    }

	#payment h1{
	  font-size: 20px;
	  color: var(--tc-ink);
	}

    .main h2{
      font-size: 1.36rem;
      line-height: 1.25;
      margin-top: 2.4rem;
      margin-bottom: .85rem;
      color: var(--tc-blue);
    }

    .main h3{
      font-size: 1.08rem;
      line-height: 1.3;
      margin-top: 1.9rem;
      margin-bottom: .55rem;
      color: var(--tc-ink);
    }

    .main p{
      margin-bottom: 1rem;
      line-height: 1.7;
      color: var(--tc-ink);
      font-size: .97rem;
    }

    .main ul,
    .main ol{
      margin: 0 0 1.1rem 1.5rem;
      line-height: 1.6;
      font-size: .97rem;
    }

    .main li + li{
      margin-top: .25rem;
    }

    .main strong{
      font-weight: 700;
    }

    .main a{
      color: var(--tc-blue);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }

    .main a:hover{
      color: var(--tc-red);
    }

    /* Optional: small note box */
    .tc-note{
      margin-top: 1.1rem;
      border: 1px solid var(--tc-border);
      background: #fff;
      border-radius: 14px;
      padding: 1.05rem 1.05rem;
      box-shadow: var(--tc-shadow);
    }

    .tc-note p{
      margin: 0;
    }

/*
    h2:nth-of-type(6){
      border-top: 1px solid var(--tc-border);
      padding-top: 2.1rem;
      margin-top: 2.6rem;
    }
*/

    /* =========================================================
       PAY.TERPCOMM.COM INTRO LOGO OVERLAY
    ========================================================= */   

    .tc-pay-page .logo-intro{
      position: fixed;
      inset: 0;
      z-index: 2000;
      display:flex;
      align-items:center;
      justify-content:center;

      background:
        radial-gradient(circle at top left, rgba(38,59,140,.28), transparent 45%),
        radial-gradient(circle at bottom right, rgba(198,31,58,.24), transparent 50%),
        linear-gradient(180deg, #07090c, #0b0f14);

      animation: introFadeOut 2.0s 1.1s forwards ease;
    }

    .tc-pay-page .logo-intro-inner img{
      width: 150%;
      max-width: 320px;
      opacity: 0;
      transform: translateY(0) scale(1.5);
      animation: logoIntro 1.45s cubic-bezier(0,0,0.2,1) forwards;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
    }

    @keyframes logoIntro{
      0%   { opacity:0; transform: translateY(18px) scale(1.45); }
      40%  { opacity:1; transform: translateY(0) scale(1.45); }
      70%  { opacity:1; transform: translateY(0) scale(1.45); }
      100% { opacity:0; transform: translateY(-10px) scale(.55); }
    }

    @keyframes introFadeOut{
      to { opacity:0; visibility:hidden; }
    }

    /* Nav logo entrance after intro */
    .tc-pay-page .nav .brand-logo img{
      opacity: 0;
      transform: translateY(-10px) scale(.65);
      animation: navLogoIn 1.8s 1.25s forwards ease-out;
    }

    @keyframes navLogoIn{
      0%   { opacity:0; transform: translateY(-10px) scale(.65); }
      100% { opacity:1; transform: translateY(0) scale(1); }
    }

    @media (max-width: 480px){
      .tc-pay-page ..logo-intro-inner img{ max-width: 70vw; transform: translateY(0) scale(1.2); }
      @keyframes logoIntro{
        0%   { opacity:0; transform: translateY(10px) scale(1.2); }
        40%  { opacity:1; transform: translateY(0) scale(1.2); }
        70%  { opacity:1; transform: translateY(0) scale(1.2); }
        100% { opacity:0; transform: translateY(-6px) scale(.62); }
      }
    }

  /* ============================
     ABOUT PAGE LAYOUT
  ============================ */
  .about-page {
    background: var(--tc-bg-soft);
    padding: 27px 0 27px;
  }

  /* HERO ROW: text left, card right */
  .about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1.1fr);
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 3rem;
    margin-top: 35px;
  }

  @media (max-width: 960px) {
    .about-hero {
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
    }
  }

  .about-kicker {
    font-size: .85rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--tc-blue);
    margin-bottom: .7rem;
  }

  .about-title {
    font-size: 2.35rem;
    line-height: 1.18;
    font-weight: 800;
    color: var(--tc-ink);
    margin-bottom: .9rem;
  }

  .about-subtitle {
    font-size: .95rem;
    font-weight: 700;
    color: var(--tc-muted);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 1.4rem;
  }

  .about-body {
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--tc-ink);
    margin-bottom: 1.45rem;
  }

  .about-body + .about-body {
    margin-top: .4rem;
  }

  .about-cta-row {
    margin-top: 1rem;
  }

  .about-hero-cta-note {
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--tc-muted);
  }

  /* sector pills under hero copy */
  .about-pill-row {
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top: 1.9rem;
  }
  .about-pill {
    padding:.45rem 1rem;
    border-radius: var(--tc-pill);
    border: 1px solid #d6daee;
    background:#fff;
    font-size:.86rem;
    font-weight:700;
    color: var(--tc-blue);
    box-shadow: 0 6px 16px rgba(0,0,0,.04);
  }

  /* MISSION CARD ON HERO RIGHT */
  .about-mission-card {
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
    padding: 2rem 2.25rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  @media (max-width: 700px) {
    .about-mission-card {
      padding: 1.7rem 1.7rem;
    }
  }

  .about-mission-block + .about-mission-block {
    border-top: 1px solid var(--tc-border);
    margin-top: 1.4rem;
    padding-top: 1.4rem;
  }

  .about-label {
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--tc-muted);
    line-height: 1.3;
    margin-bottom: .2rem;  /* tight label-to-value spacing */
  }

  .about-mission-text {
    font-size: 1.02rem;
    line-height: 1.78;      /* comfy mission/commitment paragraphs */
    color: var(--tc-ink);
  }

  /* FOCUS / APPROACH — stacked vertically */
  .about-focus-row {
    display: block;
    margin-top: 1.6rem;
  }

  .about-focus-row > div {
    margin-bottom: 1.1rem;   /* space between Focus and Approach blocks */
  }

  .about-focus-row > div:last-child {
    margin-bottom: 0;
  }

  .about-focus-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--tc-blue);
    line-height: 1.5;
  }

  /* WHO WE ARE SECTION */
  .about-section {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
    gap: 2.4rem;
    align-items: center;
    margin-bottom: 47px;
  }

  @media (max-width: 900px) {
    .about-section {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .about-section-photo {
    max-width: 360px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0,0,0,.16);
  }

  .about-section-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-section-title {
    font-size: 1.2rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--tc-muted);
    margin-bottom: .45rem;
  }

  .about-section-heading {
    font-size: 1.45rem;
    line-height: 1.7;
    font-weight: 800;
    margin-bottom: 1rem;
  }

  .about-section-body {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--tc-ink);
    margin-bottom: 1.25rem;
  }

  .about-list-title {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 800;
    color: var(--tc-muted);
    margin-bottom: .4rem;
  }

  .about-ul {
    list-style: disc;
    padding-left: 1.25rem;
    font-size: .96rem;
    line-height: 1.9;
    color: var(--tc-ink);
  }


  /* ================= FOOTER (styles only, markup via JS) ================= */
  .footer{
    position: relative;
    padding: 2.4rem 1.5rem 1.8rem;
    background: linear-gradient(
      to top,
      #0b0f14 0%,
      #07090c 25%,
      #0b0f14 100%
    );
    color: #fff;
    font-size: .92rem;
  }
  .footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 26px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.12) 45%,
      rgba(0,0,0,0) 100%
    );
    pointer-events:none;
  }
  .footer::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height: 70px;
    background: linear-gradient(
      to top,
      rgba(38,59,140,.22) 0%,
      rgba(198,31,58,.14) 35%,
      rgba(11,15,20,0) 100%
    );
    pointer-events:none;
  }
  .footer-inner{
    max-width: var(--tc-max);
    margin: 0 auto;
    text-align:center;
  }
  .footer-social-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .footer-line{
    flex:1;
    height: 3px;
    background: rgba(255,255,255,.14);
  }
  .footer-social-block{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: .8rem;
  }
  .footer-social-icons{
    display:flex;
    gap: 1.15rem;
    align-items:flex-start;
  }
  .social-pill{
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    color:#fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  }
  .social-pill:hover{
    transform: translateY(-3px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
  }
  .footer-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 2.2rem;
    margin-bottom: 1.6rem;
    flex-wrap:wrap;
  }
  .footer-nav a{
    color: rgba(255,255,255,.86);
    font-weight: 700;
    transition: color .2s ease;
  }
  .footer-nav a:hover{ color: #fff; }
  .footer-logo{
    display:flex;
    justify-content:center;
    margin-bottom: .65rem;
  }
  .footer-logo img{
    width: 210px;
    max-width: 70vw;
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.55));
  }
  .footer-copy{
    color: rgba(255,255,255,.82);
    margin-bottom: 1rem;
    font-size: .92rem;
  }
  .footer-location{
    margin-bottom: 14px;
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    text-shadow: 0 0 10px rgba(38,59,140,.25);
  }
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: .45rem;
    font-size: .82rem;
    color: rgba(255,255,255,.72);
  }
  .footer-links a{
    color: inherit;
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .footer-links a:hover{
    color: #fff;
    border-color: rgba(255,255,255,.35);
  }
  .footer-sep{ opacity:.35; }

  @media (max-width: 600px){
    .footer-line{ display:none; }
    .footer-social-row{ gap: 1rem; }
    .footer-nav{ gap: 1rem; }
    .footer{ padding-inline: 1.25rem; }
  }

/* ==========================
   TerpComm Accessibility Menu
========================== */

:root{
  --tc-a11y-z: 2350;
}

/* Floating button */
.tc-a11y-btn{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--tc-a11y-z);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tc-a11y-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,.26);
}
.tc-a11y-btn:active{
  transform: translateY(0);
}
.tc-a11y-btn svg{
  width: 26px;
  height: 26px;
}
.tc-a11y-btn:focus-visible{
  outline: 3px solid rgba(38,59,140,.55);
  outline-offset: 3px;
}

.tc-a11y-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* Backdrop */
.tc-a11y-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: calc(var(--tc-a11y-z) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.tc-a11y-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Panel */
.tc-a11y-panel{
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: var(--tc-a11y-z);
  width: min(360px, calc(100vw - 36px));
  background: rgba(255,255,255,.98);
  border: 1px solid var(--tc-border);
  border-radius: 22px;
  box-shadow: 0 22px 80px rgba(0,0,0,.26);
  transform: translateY(14px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.tc-a11y-panel.is-open{
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Header */
.tc-a11y-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  padding: 1rem 1rem .85rem;
  border-bottom: 1px solid var(--tc-border);
}
.tc-a11y-title{
  font-weight: 900;
  font-size: 1rem;
  color: var(--tc-ink);
  line-height: 1.2;
}
.tc-a11y-sub{
  margin-top: .25rem;
  font-size: .85rem;
  color: var(--tc-muted);
  line-height: 1.4;
}
.tc-a11y-close{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  cursor:pointer;
  font-size: 1.35rem;
  line-height: 1;
}
.tc-a11y-close:focus-visible{
  outline: 3px solid rgba(198,31,58,.45);
  outline-offset: 2px;
}

/* Body */
.tc-a11y-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.tc-a11y-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* Tiles */
.tc-a11y-tile{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  padding: .85rem .85rem;
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap: .55rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-height: 92px;
}
.tc-a11y-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.tc-a11y-tile:focus-visible{
  outline: 3px solid rgba(38,59,140,.45);
  outline-offset: 3px;
}
.tc-a11y-tile .k{
  font-weight: 900;
  font-size: .95rem;
  color: var(--tc-ink);
}
.tc-a11y-tile .d{
  font-size: .83rem;
  color: var(--tc-muted);
  line-height: 1.35;
}

/* Toggle indicator */
.tc-a11y-tile[aria-pressed="true"]{
  border-color: rgba(38,59,140,.35);
  box-shadow: 0 18px 44px rgba(38,59,140,.14);
}
.tc-a11y-tile[aria-pressed="true"] .k{
  color: var(--tc-blue);
}

/* Footer actions */
.tc-a11y-actions{
  padding: .9rem 1rem 1rem;
  border-top: 1px solid var(--tc-border);
  display:flex;
  gap: .6rem;
  flex-wrap:wrap;
}
.tc-a11y-action{
  border:0;
  cursor:pointer;
  border-radius: var(--tc-pill);
  padding: .62rem 1rem;
  font-weight: 900;
  font-size: .92rem;
}
.tc-a11y-action.primary{
  color:#fff;
  background: linear-gradient(120deg, var(--tc-blue), #1c2f78);
  box-shadow: 0 14px 26px rgba(38,59,140,.22);
}
.tc-a11y-action.ghost{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  color: var(--tc-ink);
}

/* Small screens */
@media (max-width: 420px){
  .tc-a11y-grid{ grid-template-columns: 1fr; }
}

/* Reading Guide line */
.tc-a11y-reading-guide-line{
  position: fixed;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity .15s ease;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(198,31,58,.0) 20%,
    rgba(38,59,140,.55) 50%,
    rgba(198,31,58,.0) 80%,
    rgba(0,0,0,0) 100%
  );
}

body.tc-a11y-reading-guide .tc-a11y-reading-guide-line{
  opacity: 1;
}

/* Reading Mask overlay */
.tc-a11y-reading-mask{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999998;
  opacity: 0;
  transition: opacity .15s ease;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.55) calc(50% - 60px),
      rgba(0,0,0,0)  calc(50% - 60px),
      rgba(0,0,0,0)  calc(50% + 60px),
      rgba(0,0,0,.55) calc(50% + 60px),
      rgba(0,0,0,.55) 100%
    );
}

body.tc-a11y-reading-mask .tc-a11y-reading-mask{
  opacity: 1;
}

/* Big cursor (clean approach: add a visible cursor ring) */
.tc-a11y-cursor-ring{
  position: fixed;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(38,59,140,.65);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 999997;
  transform: translate(-50%, -50%);
  opacity: 0;
}

body.tc-a11y-big-cursor .tc-a11y-cursor-ring{
  opacity: 1;
}

/* ==========================
   Accessibility feature hooks
   (Applied by JS via body classes)
========================== */

body.tc-a11y-contrast{
  background: #0b0f14;
  color: #fff;
}
body.tc-a11y-contrast .about-mission-card,
body.tc-a11y-contrast .tc-cookie-banner,
body.tc-a11y-contrast .tc-cookie-modal-card,
body.tc-a11y-contrast .tc-a11y-panel{
  background: #0f1620;
  color: #fff;
}
body.tc-a11y-contrast .tc-a11y-tile{
  background: #121b27;
  border-color: rgba(255,255,255,.14);
}
body.tc-a11y-contrast .tc-a11y-tile .k{ color:#fff; }
body.tc-a11y-contrast .tc-a11y-tile .d{ color: rgba(255,255,255,.75); }

body.tc-a11y-highlight-links a{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

body.tc-a11y-big-text{
  font-size: 112%;
}

body.tc-a11y-text-spacing{
  letter-spacing: .04em;
  word-spacing: .08em;
}

body.tc-a11y-line-height{
  line-height: 2.05;
}

body.tc-a11y-hide-images img{
  visibility: hidden;
}

body.tc-a11y-cursor *{
  cursor: default;
}
body.tc-a11y-cursor a,
body.tc-a11y-cursor button{
  cursor: pointer;
}

/* Reduce motion */
body.tc-a11y-reduce-motion *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Respect OS preference automatically */
@media (prefers-reduced-motion: reduce){
  body:not(.tc-a11y-motion-explicit-off) *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


	/* =========================================================
	   APPOINTMENT REQUEST EMAIL TEMPLATE
	========================================================= */
	.request-template-wrap {
	  margin-top: 1.1rem;
	  border-radius: 14px;
	  border: 4px solid var(--tc-blue);
	  background: #f8f9ff;
	  padding: 1.15rem 1.25rem 1.3rem;
	  max-width: 640px;
	  margin-left: auto;
	  margin-right: auto;
	}

	/* header row inside the blue frame */
	.request-template-header{
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  gap:.75rem;
	  margin-bottom:.55rem;
	}

	.request-template-title{
	  font-size:.9rem;
	  font-weight:800;
	  text-transform:uppercase;
	  letter-spacing:.14em;
	  color: var(--tc-muted);
	}

	.request-template-copy-btn {
	  appearance:none;
	  border:0;
	  border-radius: var(--tc-pill);
	  padding: .32rem .8rem;
	  font-size:.78rem;
	  font-weight:800;
	  letter-spacing:.06em;
	  text-transform:uppercase;
	  display:inline-flex;
	  align-items:center;
	  gap:.35rem; /* space between icon and text */
	  cursor:pointer;

	  color:#fff;
	  background: var(--tc-blue);
	  box-shadow: 0 6px 14px rgba(38,59,140,.35);

	  transition:
		background .18s ease,
		box-shadow .18s ease,
		transform .12s ease,
		filter .18s ease;
	}

	/* icon inside the button */
	.request-template-copy-icon {
	  width: 18px;
	  height: 18px;
	  display:block;
	}

	.request-template-copy-btn:hover{
	  filter: brightness(1.05);
	  transform: translateY(-1px);
	  box-shadow: 0 9px 18px rgba(38,59,140,.35);
	}

	.request-template-copy-btn:active{
	  transform: translateY(0);
	  box-shadow: 0 5px 10px rgba(0,0,0,.35);
	}

	.request-template-copy-btn.is-copied{
	  background: var(--tc-red);
	  box-shadow: 0 8px 16px rgba(198,31,58,.35);
	}

	.request-template-wrap p.request-template-note{
	  margin-bottom: .7rem;
	  font-size: .9rem;
	  color: var(--tc-muted);
	}

	.request-template-body{
	  overflow-x:auto;
	}

	/* The table that gets copied */
	.request-template{
	  border-collapse: collapse;
	  width: 100%;
	  max-width: 640px;
	  font-family: 'Lexend', Arial, sans-serif; /* helps carry Lexend into email paste */
	}

	.request-template td{
	  border: 1px solid #dcdff0;               /* lighter inner grid */
	  padding: 6px 10px;
	  font-size: .95rem;
	  line-height: 1.4;
	}

	.request-template-label{
	  background:#eff1fb;
	  font-weight: 700;
	  white-space: nowrap;
	  width: 40%;
	}

	.request-template-blank{
	  color:#555;
	  min-width: 220px;
	}

	@media (max-width: 600px){
	  .request-template td{
		font-size: .9rem;
		padding: 6px 8px;
	  }
	  .request-template-label{
		white-space: normal;
	  }
	}

    /* Simple action row */
    .tc-book-actions{
      display:flex;
      gap:.8rem;
      flex-wrap:wrap;
      margin-top:.35rem;
      margin-bottom: 1.2rem;
    }

    /* Make links look like your button class, but keep safe fallback */
    .tc-book-actions .button{
      text-decoration:none;
    }

    .tc-muted{
      color: var(--tc-muted);
    }

	/* =========================================================
	   TERMS LANDING "TOP BOX"
	========================================================= */
	.tc-terms-topbox{
	  border: 1px solid var(--tc-border);
	  border-radius: 18px;
	  overflow: hidden;
	  margin-bottom: 2rem;
	  box-shadow: var(--tc-shadow);
	  background: #fff;
	}

	.tc-terms-topbox-head{
	  background: var(--tc-blue);
	  color: #fff;
	  padding: 1.05rem 1.25rem;
	  font-weight: 800;
	  font-size: 1.05rem;
	  letter-spacing: .01em;
	}

	.tc-terms-topbox-body{
	  padding: 1.35rem 1.25rem 1.15rem;
	}

	.tc-terms-topbox-body h1{
	  margin: 0 0 .35rem;
	  color: var(--tc-ink);
	  font-size: 2.05rem;
	  line-height: 1.15;
	}

	.tc-terms-topbox-meta{
	  margin: 0 0 .9rem;
	  color: var(--tc-muted);
	  font-size: .95rem;
	}

	.tc-terms-topbox-body p{
	  margin: 0;
	  color: var(--tc-ink);
	  line-height: 1.7;
	}

	/* Mobile spacing */
	@media (max-width: 768px){
	  .tc-terms-topbox-head{
		padding: .95rem 1.05rem;
	  }
	  .tc-terms-topbox-body{
		padding: 1.1rem 1.05rem 1rem;
	  }
	  .tc-terms-topbox-body h1{
		font-size: 1.75rem;
	  }
	}

	/* =========================================================
	   TERMS TOP BOX LINKLIST
	========================================================= */	  

	/* Link list inside the top box */
	.tc-terms-linklist{
	  list-style: none;
	  padding-left: 0;
	  margin: 1.05rem 0 0;
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 1.05rem 2.5rem;
	}

	.tc-terms-linklist li{
	  margin: 0;
	}

	.tc-terms-linklist a{
	  display: inline-block;
	  font-size: 1.35rem;
	  font-weight: 500;
	  text-decoration: none;
	  color: var(--tc-blue);
	  line-height: 1.25;
	}

	.tc-terms-linklist a:hover{
	  color: var(--tc-red);
	  text-decoration: underline;
	}

	/* Mobile: 1 column */
	@media (max-width: 768px){
	  .tc-terms-linklist{
		grid-template-columns: 1fr;
		gap: .85rem;
	  }
	  .tc-terms-linklist a{
		font-size: 1.15rem;
	  }
	}	

  /* TerpComm cookie UI */



/* Backdrop for the center modal */
.tc-cookie-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index: 2500;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
}
.tc-cookie-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Bottom banner container */
.tc-cookie-banner-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index: 2400;
  padding: 0;
  pointer-events:none;
}
.tc-cookie-banner{
  pointer-events:auto;
  width: 100%;
  max-width: none;
  margin: 0;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--tc-border);
  border-radius: 0;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  padding: 1.1rem 1.15rem;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .9s ease, opacity .9s ease;
}
.tc-cookie-banner.is-open{
  transform: translateY(0);
  opacity: 1;
}

.tc-cookie-banner-title{
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--tc-ink);
  margin-bottom: .35rem;
}
.tc-cookie-banner-text{
  color: var(--tc-ink);
  line-height: 1.7;
  font-size: .95rem;
  margin-bottom: .9rem;
}
.tc-cookie-banner-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
}

.tc-cookie-btn{
  border:0;
  cursor:pointer;
  border-radius: var(--tc-pill);
  padding: .62rem 1rem;
  font-weight: 900;
  font-size: .92rem;
}
.tc-cookie-btn-primary{
  color:#fff;
  background: linear-gradient(120deg, var(--tc-red), #9f162c);
  box-shadow: 0 14px 26px rgba(198,31,58,.22);
}
.tc-cookie-btn-ghost{
  background: rgba(38,59,140,.08);
  color: var(--tc-blue);
  border: 1px solid rgba(38,59,140,.18);
}

.tc-cookie-note{
  margin-top: .85rem;
  font-size: .9rem;
  color: var(--tc-muted);
  line-height: 1.6;
}
.tc-cookie-note a{
  text-decoration: underline;
  font-weight: 800;
}

/* Center modal */
.tc-cookie-modal{
  position:fixed;
  inset:0;
  z-index: 2600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.2rem;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
}
.tc-cookie-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.tc-cookie-modal-card{
  width: min(860px, 100%);
  max-height: min(78vh, 720px);
  overflow:auto;
  background:#fff;
  border: 1px solid var(--tc-border);
  border-radius: 22px;
  box-shadow: 0 22px 80px rgba(0,0,0,.28);
}

.tc-cookie-modal-head{
  position: sticky;
  top:0;
  background:#fff;
  border-bottom: 1px solid var(--tc-border);
  padding: 1rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.tc-cookie-modal-title{
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--tc-ink);
}
.tc-cookie-modal-close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: 1.4rem;
  line-height: 1;
  cursor:pointer;
}

.tc-cookie-modal-body{
  padding: 1rem 1.1rem 1.1rem;
}
.tc-cookie-section-title{
  font-weight: 900;
  font-size: 1rem;
  margin: .9rem 0 .35rem;
  color: var(--tc-ink);
}
.tc-cookie-paragraph{
  font-size: .98rem;
  line-height: 1.85;
  color: var(--tc-ink);
}

.tc-cookie-option{
  display:flex;
  gap: .85rem;
  padding: .85rem 0;
  border-top: 1px solid var(--tc-border);
  align-items:flex-start;
}
.tc-cookie-option:first-of-type{
  border-top: 0;
}
.tc-cookie-option input[type="checkbox"]{
  width: 22px;
  height: 22px;
  margin-top: .15rem;
}
.tc-cookie-option label{
  cursor:pointer;
  flex:1;
}
.tc-cookie-option-title{
  font-weight: 900;
  color: var(--tc-ink);
  font-size: 1rem;
}
.tc-cookie-option-desc{
  margin-top: .25rem;
  color: var(--tc-muted);
  line-height: 1.6;
  font-size: .95rem;
}

.tc-cookie-modal-actions{
  padding: 1rem 1.1rem 1.1rem;
  border-top: 1px solid var(--tc-border);
  display:flex;
  justify-content:flex-end;
  gap: .6rem;
}

@media (max-width: 560px){
  .tc-cookie-banner{ border-radius: 16px; }
  .tc-cookie-modal-card{ border-radius: 18px; }
}