/* ============ DESIGN TOKENS ============ */
  :root{
    --obsidian: #0b0b0b;
    --panel: #131211;
    --panel-raised: #171614;
    --gold: #d4af37;
    --gold-soft: #e8cd7a;
    --champagne: #f3e6bf;
    --hairline: rgba(212,175,55,0.22);
    --hairline-strong: rgba(212,175,55,0.45);
    --ink: #ece7de;
    --ink-dim: #a39d8f;
    --ink-faint: #6c6759;
    --shadow-deep: 0 30px 80px rgba(0,0,0,0.55);

    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{
    scroll-behavior:smooth;
    scroll-padding-top: env(safe-area-inset-top, 0px);
    font-size: 112%;
  }

  body{
    background: var(--obsidian);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 450;
    line-height: 1.6;
    min-height: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: hidden;
  }

  /* full-page worship photo, blurred and dimmed, sitting behind the vignette */
  .bg-photo{
    position:fixed; inset:0;
    z-index:-1;
    background-image: linear-gradient(rgba(11,11,11,0.35), rgba(11,11,11,0.35)), url(img/worship-background.jpg);
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    filter: blur(2px);
    opacity: 0.8;
    transform: scale(1.08);
    pointer-events:none;
  }

  /* subtle grain + radial vignette so obsidian doesn't feel flat */
  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 90% 60% at 50% -10%, rgba(212,175,55,0.10), transparent 60%),
      radial-gradient(ellipse 70% 50% at 85% 100%, rgba(212,175,55,0.05), transparent 60%),
      linear-gradient(rgba(11,11,11,0.55), rgba(11,11,11,0.78));
    pointer-events:none;
    z-index:0;
  }

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

  ::selection{ background: var(--gold); color:#0b0b0b; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  /* ============ LAYOUT SHELL ============ */
  .wrap{
    position:relative;
    z-index:1;
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 64px);
  }

  /* ============ NAV ============ */
  header.site-nav{
    position:sticky; top: env(safe-area-inset-top, 0px);
    z-index:40;
    background: rgba(11,11,11,0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hairline);
  }
  .site-nav .wrap{
    display:grid; grid-template-columns: auto 1fr auto; align-items:center;
    column-gap: clamp(12px,2vw,24px);
    padding-top:16px; padding-bottom:16px;
  }
  .site-nav .brand{ justify-self:start; }
  .brand{
    display:flex; align-items:center; gap:12px;
    font-family: var(--serif);
    font-size: 1.25rem;
    letter-spacing:0.02em;
    color: var(--champagne);
  }
  .brand .mark{
    width:58px; height:58px; flex-shrink:0;
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.45));
  }
  /* dropdown menu */
  .nav-right{
    grid-column:3; justify-self:end;
    display:flex; align-items:center; gap:12px;
  }
  .nav-menu{ position:relative; }
  .nav-menu-btn{
    display:inline-flex; align-items:center; gap:10px;
    font: inherit; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase;
    color: var(--ink-dim);
    background: rgba(19,18,17,0.6);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 8px 16px 8px 14px;
    cursor:pointer;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
  }
  .nav-menu-btn:hover, .nav-menu-btn:focus-visible, .nav-menu.open .nav-menu-btn{
    color: var(--gold-soft); border-color: var(--hairline-strong);
    background: rgba(212,175,55,0.06); outline:none;
  }
  .burger{ position:relative; width:16px; height:12px; display:inline-block; }
  .burger i{
    position:absolute; left:0; right:0; height:1.5px; border-radius:2px;
    background: var(--gold);
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
  }
  .burger i:nth-child(1){ top:0; }
  .burger i:nth-child(2){ top:5px; }
  .burger i:nth-child(3){ top:10px; }
  .nav-menu.open .burger i:nth-child(1){ top:5px; transform: rotate(45deg); }
  .nav-menu.open .burger i:nth-child(2){ opacity:0; }
  .nav-menu.open .burger i:nth-child(3){ top:5px; transform: rotate(-45deg); }

  .nav-menu-panel{
    position:absolute; right:0; top: calc(100% + 14px);
    width: min(360px, calc(100vw - 32px));
    display:grid; grid-template-columns: 1fr 1fr; gap:6px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--hairline-strong);
    background: rgba(16,15,14,0.94);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    opacity:0; visibility:hidden;
    transform: translateY(-8px) scale(0.98); transform-origin: top right;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
    z-index:50;
  }
  .nav-menu.open .nav-menu-panel{
    opacity:1; visibility:visible; transform:none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
  }
  .nav-menu-panel a{
    display:flex; align-items:center; gap:10px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size:0.92rem;
    color: var(--ink-dim);
    border: 1px solid transparent;
    transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .nav-menu-panel a::before{
    content:""; width:5px; height:5px; border-radius:50%;
    background: var(--gold); opacity:0.55; flex-shrink:0;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .nav-menu-panel a:hover, .nav-menu-panel a:focus-visible{
    color: var(--champagne);
    background: rgba(212,175,55,0.07);
    border-color: var(--hairline);
    outline:none;
  }
  .nav-menu-panel a:hover::before, .nav-menu-panel a:focus-visible::before{ opacity:1; transform: scale(1.4); }
  @media (max-width: 420px){
    .nav-menu-btn span[data-i18n]{ display:none; }
    .nav-menu-btn{ padding:10px 12px; }
  }

  .lang-switch{ position:relative; display:inline-flex; align-items:center; }
  .lang-switch select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background: rgba(19,18,17,0.6);
    border: 1px solid var(--hairline);
    color: var(--ink-dim);
    font-family: var(--sans);
    font-size: 0.82rem;
    letter-spacing:0.03em;
    padding: 7px 30px 7px 12px;
    border-radius: 999px;
    cursor:pointer;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  .lang-switch select:hover, .lang-switch select:focus-visible{
    border-color: var(--hairline-strong);
    color: var(--gold-soft);
    outline: none;
  }
  .lang-switch::after{
    content:"";
    position:absolute; right:11px; top:50%;
    width:7px; height:7px;
    border-right:1.4px solid var(--gold);
    border-bottom:1.4px solid var(--gold);
    transform: translateY(-65%) rotate(45deg);
    pointer-events:none;
  }
  .lang-switch select option{ background: #131211; color: var(--ink-dim); }

  @media (max-width: 960px){
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    padding: clamp(56px, 10vw, 108px) 0 clamp(40px, 8vw, 72px);
    text-align:center;
  }

  .hero-mark{
    width: clamp(250px, min(54vw, 58vh), 520px);
    height: clamp(250px, min(54vw, 58vh), 520px);
    margin: 0 auto clamp(28px, 5vw, 44px);
    filter: drop-shadow(0 0 28px rgba(212,175,55,0.35)) drop-shadow(0 0 6px rgba(255,255,255,0.12));
    opacity:0;
    animation: rise 1.1s var(--ease) 0.1s forwards;
  }

  .hero-kicker{
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--gold-soft);
    opacity:0;
    animation: rise 1.1s var(--ease) 0.3s forwards;
  }

  .hero h1{
    font-family: var(--serif);
    font-weight:600;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem);
    line-height:1.05;
    color: var(--champagne);
    margin: 14px auto 20px;
    max-width: 16ch;
    opacity:0;
    animation: rise 1.1s var(--ease) 0.45s forwards;
  }

  .hero p.lede{
    max-width: 52ch;
    margin: 0 auto;
    color: var(--ink-dim);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    opacity:0;
    animation: rise 1.1s var(--ease) 0.6s forwards;
  }

  .hero-cta{
    display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
    margin-top: 34px;
    opacity:0;
    animation: rise 1.1s var(--ease) 0.75s forwards;
  }

  @keyframes rise{
    from{ opacity:0; transform: translateY(16px); }
    to{ opacity:1; transform: translateY(0); }
  }


  /* ============ HERO BACKGROUND VIDEO (short YouTube clips) ============ */
  .hero-stage{ position:relative; overflow:hidden; isolation:isolate; }
  .hero-stage .hero{ z-index:2; }
  .hero-video{
    position:absolute; inset:0; z-index:0;
    opacity:0; transition: opacity 0.9s var(--ease);
    pointer-events:none;
  }
  .hero-video.show{ opacity:1; }
  .hero-video-frame{
    position:absolute; top:50%; left:50%;
    width:max(100%, calc(100vh * 16 / 9)); aspect-ratio:16/9;   /* fallback; script sizes it exactly */
    transform: translate(-50%, -50%) scale(1.12);
    transform-origin: 50% 50%;
    opacity:0;
    transition: opacity 1.4s ease-in-out;
  }
  .hero-video-frame.cut{ transition:none; }
  .hero-video-frame.on{ opacity:1; }
  .hero-video-frame iframe{ width:100%; height:100%; border:0; pointer-events:none; }
  .hero-video-shade{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(ellipse at center, rgba(8,8,8,0.45) 0%, rgba(8,8,8,0.72) 70%),
      linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0) 18%, rgba(8,8,8,0) 72%, rgba(8,8,8,0.95) 100%);
    opacity:0; transition: opacity 0.9s var(--ease);
  }
  .hero-video.show + .hero-video-shade, .hero-stage.has-video .hero-video-shade{ opacity:1; }
  @media (prefers-reduced-motion: reduce){ .hero-video, .hero-video-shade{ display:none; } }

  /* ============ MISSION ============ */
  .mission{
    padding: clamp(10px, 3vw, 20px) 0 clamp(50px, 9vw, 90px);
    display:flex;
    justify-content:center;
  }

  .mission-card{
    position:relative;
    max-width: 780px;
    width:100%;
    text-align:center;
    padding: clamp(40px, 7vw, 64px) clamp(28px, 6vw, 72px);
    border-radius: 24px;
    border: 1px solid var(--hairline);
    background: linear-gradient(165deg, rgba(212,175,55,0.05), rgba(255,255,255,0.015));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .mission-card::before,
  .mission-card::after{
    content:"";
    position:absolute;
    left:50%;
    width:1px;
    height:28px;
    background: linear-gradient(180deg, var(--gold), transparent);
    transform: translateX(-50%);
  }
  .mission-card::before{ top:-28px; }
  .mission-card::after{ bottom:-28px; transform: translateX(-50%) rotate(180deg); }

  .mission-label{
    display:inline-block;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight:600;
    letter-spacing: 0.16em;
    color: var(--gold);
    margin-bottom: 22px;
  }

  .mission-quote{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    line-height: 1.5;
    color: var(--champagne);
    max-width: 34ch;
    margin: 0 auto;
  }

  .btn{
    font-family: var(--sans);
    font-size:0.92rem;
    font-weight:600;
    padding: 13px 30px;
    border-radius: 999px;
    border:1px solid transparent;
    cursor:pointer;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
  }
  .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  .btn-lg{ font-size:1.15rem; padding: 18px 46px; }

  .btn-primary{
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    color: #17130a;
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212,175,55,0.28); }

  .btn-ghost{
    background: transparent;
    color: var(--champagne);
    border-color: var(--hairline-strong);
  }
  .btn-ghost:hover{ border-color: var(--gold); background: rgba(212,175,55,0.06); transform: translateY(-2px); }

  /* ============ TAB HUB ============ */
  .hub{
    padding: clamp(20px, 6vw, 40px) 0 clamp(70px, 10vw, 120px);
  }

  .tabs{
    display:flex;
    justify-content:center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding: 6px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-width: fit-content;
    margin-left:auto; margin-right:auto;
  }

  .tab-btn{
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight:600;
    color: var(--ink-dim);
    background: transparent;
    border: 1px solid var(--hairline);
    padding: 11px 22px;
    border-radius: 999px;
    cursor:pointer;
    white-space:nowrap;
    position:relative;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .tab-btn:hover{ border-color: var(--hairline-strong); }
  .tab-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .tab-btn[aria-selected="true"], .tab-btn[aria-current="page"] {
    color: #17130a;
    border-color: transparent;
  }
  .tab-btn .tab-pill-bg{
    position:absolute; inset:0;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    border-radius:999px;
    z-index:-1;
    opacity:0;
    transform: scale(0.9);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .tab-btn[aria-selected="true"] .tab-pill-bg, .tab-btn[aria-current="page"] .tab-pill-bg {
    opacity:1; transform: scale(1);
  }

  .panel-stage{
    position:relative;
    border-radius: 22px;
    border: 1px solid var(--hairline);
    background: linear-gradient(165deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.05);
    padding: clamp(28px, 5vw, 56px);
    min-height: 420px;
    overflow: hidden;
  }

  .panel-stage::before{
    content:"";
    position:absolute; top:0; left:8%; right:8%; height:1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:0.5;
  }

  .tab-panel{
    display:none;
  }
  .tab-panel.active{
    display:block;
    animation: panelIn 0.5s var(--ease);
  }
  .tab-panel.leaving{
    display:block;
    animation: panelOut 0.22s var(--ease) forwards;
  }

  @keyframes panelIn{
    from{ opacity:0; transform: translateX(18px); }
    to{ opacity:1; transform: translateX(0); }
  }
  @keyframes panelOut{
    from{ opacity:1; transform: translateX(0); }
    to{ opacity:0; transform: translateX(-18px); }
  }

  .panel-head{
    display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;
    margin-bottom: 30px;
    padding-bottom:20px;
    border-bottom: 1px solid var(--hairline);
  }
  .panel-head h2{
    font-family: var(--serif);
    font-weight:600;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    color: var(--champagne);
  }
  .panel-head .panel-sub{
    color: var(--ink-faint);
    font-size:0.9rem;
  }

  /* schedule list */
  .service-list{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 20px;
  }
  .day-group{
    padding: 26px 28px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: linear-gradient(165deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
  }
  .day-group:hover{
    border-color: var(--hairline-strong);
    background: rgba(212,175,55,0.04);
    transform: translateY(-3px);
  }
  .day-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-family: var(--serif);
    font-weight:600;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--gold-soft);
    margin-bottom: 16px;
    padding-bottom:14px;
    border-bottom: 1px solid var(--hairline);
  }
  .day-label::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background: var(--gold);
    flex-shrink:0;
  }
  .service-row{
    display:flex;
    flex-direction:column;
    gap: 3px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .service-row:last-child{ border-bottom:none; padding-bottom:0; }
  .service-row:first-child{ padding-top:0; }
  .service-row .name{
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--ink);
  }
  .service-row .desc{
    color: var(--ink-faint);
    font-size:0.92rem;
    max-width: 62ch;
  }
  .service-row .time{
    font-family: var(--sans);
    color: var(--gold-soft);
    font-size:0.86rem;
    font-weight:600;
  }

  /* upcoming events */
  .events-list{
    display:flex;
    flex-direction:column;
    gap: 18px;
  }
  .event-card{
    display:grid;
    grid-template-columns: minmax(76px, auto) 1fr;
    gap: 22px;
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: linear-gradient(165deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
  }
  .event-card:hover{
    border-color: var(--hairline-strong);
    background: rgba(212,175,55,0.04);
    transform: translateY(-2px);
  }
  .event-date{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--hairline-strong);
    background: linear-gradient(180deg, rgba(212,175,55,0.14), rgba(212,175,55,0.03));
    height:fit-content;
  }
  .event-month{
    font-family: var(--sans);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.08em;
    color: var(--gold);
    text-transform:uppercase;
  }
  .event-day{
    font-family: var(--serif);
    font-size:1.7rem;
    color: var(--champagne);
    line-height:1.1;
  }
  .event-details h3{
    font-family: var(--serif);
    font-weight:600;
    font-size:1.25rem;
    color: var(--champagne);
    margin-bottom:6px;
  }
  .event-time{
    font-family: var(--sans);
    font-size:0.82rem;
    color: var(--gold-soft);
    margin-bottom:8px;
  }
  .event-desc{
    color: var(--ink-faint);
    font-size:0.92rem;
  }
  @media (max-width: 560px){
    .event-card{ grid-template-columns: minmax(60px, auto) 1fr; gap:16px; padding:18px; }
    .event-day{ font-size:1.4rem; }
  }

  /* live stream */
  .stream-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items:start;
  }
  @media (max-width: 780px){
    .stream-grid{ grid-template-columns: 1fr; }
  }
  .stream-frame{
    position:relative;
    aspect-ratio: 21/9;
    border-radius:14px;
    overflow:hidden;
    border: 1px solid var(--hairline);
    background: #050505 radial-gradient(circle at 50% 50%, rgba(212,175,55,0.08), transparent 65%);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:14px;
    cursor:pointer;
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .stream-frames{ display:flex; flex-direction:column; gap:18px; }
  .stream-frame:hover, .stream-frame:focus-visible{
    border-color: var(--hairline-strong);
    transform: translateY(-2px);
  }
  .stream-frame:focus-visible{ outline: 2px solid var(--gold); outline-offset:3px; }
  .stream-frame .pulse-dot{
    width:10px; height:10px; border-radius:50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(212,175,55,0.6);
    animation: pulse 2.2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
    70%{ box-shadow: 0 0 0 16px rgba(212,175,55,0); }
    100%{ box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  }
  .stream-frame .stream-label{
    font-size:0.82rem; color: var(--ink-faint); letter-spacing:0.03em;
  }
  .stream-copy p{ color: var(--ink-dim); font-size:0.95rem; margin-bottom:16px; }
  .stream-copy .btn{ margin-top:4px; }


  /* embedded YouTube + Facebook previews */
  .stream-embed{ margin:0; display:flex; flex-direction:column; gap:10px; }
  .stream-embed-box{
    position:relative;
    width:100%;
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--hairline);
    background:#050505;
  }
  .stream-embed-box.yt{ aspect-ratio:16/9; }
  .stream-embed-box.fb{ height:520px; max-width:500px; margin:0 auto; background:#fff; }
  .stream-embed-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .stream-embed figcaption{
    display:flex; align-items:center; gap:10px;
    font-size:0.85rem; letter-spacing:0.03em; color: var(--ink-dim);
  }
  .stream-embed figcaption a:hover, .stream-embed figcaption a:focus-visible{ color: var(--gold-soft); }
  .stream-embed .pulse-dot{
    width:8px; height:8px; border-radius:50%;
    background: var(--gold);
    animation: pulse 2.2s infinite;
  }
  .stream-frames{ gap:28px; }

  /* ministries */
  .ministry-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 26px;
  }
  .ministry-card{
    padding: 26px 24px;
    border-radius: 18px;
    border: 1px solid var(--hairline);
    background: linear-gradient(165deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
  }
  .ministry-card:hover{
    border-color: var(--hairline-strong);
    transform: translateY(-3px);
    background: linear-gradient(165deg, rgba(212,175,55,0.06), rgba(255,255,255,0.01));
  }
  .ministry-icon{
    width: 50px; height:50px;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg, rgba(212,175,55,0.16), rgba(212,175,55,0.04));
    border: 1px solid var(--hairline-strong);
    color: var(--gold-soft);
    margin-bottom:16px;
  }
  .ministry-icon svg{ width:24px; height:24px; }
  .ministry-card h3{
    font-family: var(--serif);
    font-size:1.3rem;
    color: var(--champagne);
    margin-bottom:8px;
    padding-bottom:10px;
    border-bottom: 1px solid var(--hairline);
  }
  .ministry-card p{
    color: var(--ink-faint);
    font-size:0.92rem;
  }



  /* ministries: slow horizontal scroll */
  .ministry-marquee{
    overflow:hidden;
    padding: 6px 0 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .ministry-track{
    display:flex; width:max-content;
    will-change: transform;
  }
  .ministry-carousel{ position:relative; }
  .min-arrow{
    position:absolute; top:50%; z-index:3;
    width:46px; height:46px; border-radius:50%;
    transform: translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    color: var(--gold-soft);
    background: rgba(16,15,14,0.82);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid var(--hairline-strong);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    cursor:pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  .min-arrow svg{ width:20px; height:20px; }
  .min-arrow.prev{ left:-8px; }
  .min-arrow.next{ right:-8px; }
  .min-arrow:hover, .min-arrow:focus-visible{
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    color:#17130a; border-color:transparent; outline:none;
    transform: translateY(-50%) scale(1.06);
  }
  .min-arrow:active{ transform: translateY(-50%) scale(0.95); }
  .ministry-track .ministry-card{ flex: 0 0 clamp(230px, 26vw, 280px); margin-right:22px; }


  /* ministry cards are clickable -> sign-up form */
  .ministry-card{ cursor:pointer; display:flex; flex-direction:column; }
  .ministry-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  .ministry-card .min-signup{
    margin-top:auto; padding-top:14px;
    font-size:0.82rem; letter-spacing:0.03em;
    color: var(--gold-soft);
  }

  /* sign-up dialog */
  .signup-dialog{
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow:auto;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 18px;
    border: 1px solid var(--hairline-strong);
    background: #131211;
    color: var(--ink);
    font-family: var(--sans);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  }
  .signup-dialog::backdrop{ background: rgba(5,5,5,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .signup-dialog h2{
    font-family: var(--serif); font-weight:500;
    font-size: clamp(1.6rem, 4vw, 2rem);
    color: var(--champagne);
    margin: 0 0 4px;
  }
  .signup-dialog .signup-sub{ color: var(--ink-dim); font-size:0.92rem; margin:0 0 20px; }
  .signup-close{
    position:absolute; top:14px; right:14px;
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--hairline); background:transparent;
    color: var(--ink-dim); font-size:1.3rem; line-height:1; cursor:pointer;
  }
  .signup-close:hover, .signup-close:focus-visible{ color: var(--gold-soft); border-color: var(--hairline-strong); outline:none; }
  .signup-form{ display:grid; gap:14px; }
  .signup-form label{ display:grid; gap:6px; font-size:0.85rem; color: var(--ink-dim); }
  .signup-form input, .signup-form select, .signup-form textarea{
    width:100%;
    font: inherit; font-size:0.95rem;
    color: var(--ink);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 0.2s var(--ease);
  }
  .signup-form textarea{ min-height:90px; resize:vertical; }
  .signup-form select option{ background:#131211; color: var(--ink); }
  .signup-form input:focus, .signup-form select:focus, .signup-form textarea:focus{
    outline:none; border-color: var(--gold);
  }
  .signup-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .signup-form .btn{ justify-self:start; margin-top:6px; border:none; cursor:pointer; }
  .signup-form .btn[disabled]{ opacity:0.6; cursor:wait; }
  .signup-status{ font-size:0.9rem; min-height:1.2em; margin:0; }
  .signup-status.ok{ color: var(--gold-soft); }
  .signup-status.err{ color: #e6a08f; }
  .signup-status a{ text-decoration:underline; }

  /* about */
  .about-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  @media (max-width: 780px){ .about-grid{ grid-template-columns:1fr; } }
  .about-grid p{ color: var(--ink-dim); font-size:0.98rem; margin-bottom:16px; }
  .about-grid p:last-child{ margin-bottom:0; }

  .pastor-section{
    display:grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 36px;
    align-items:center;
    margin-top: 44px;
    padding-top: 40px;
    border-top: 1px solid var(--hairline);
  }
  @media (max-width: 720px){
    .pastor-section{ grid-template-columns: 1fr; }
  }
  .pastor-photo-wrap{
    position:relative;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid var(--hairline-strong);
    box-shadow: var(--shadow-deep);
  }
  .pastor-photo-wrap::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 60%, rgba(11,11,11,0.35));
    pointer-events:none;
  }
  .pastor-photo{
    width:100%;
    display:block;
    aspect-ratio: 6/7;
    object-fit: cover;
    object-position: top center;
  }
  .pastor-copy{
    display:flex;
    flex-direction:column;
  }
  .pastor-copy p{
    color: var(--ink-dim);
    font-size:0.98rem;
    margin-bottom:16px;
  }
  .pastor-copy p:last-child{ margin-bottom:0; }
  .pull{
    font-family: var(--serif);
    font-style:italic;
    font-size:1.4rem;
    color: var(--gold-soft);
    line-height:1.4;
    border-left: 2px solid var(--gold);
    padding-left:20px;
  }

  /* ============ CONTACT ============ */
  .contact-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 22px;
  }
  .contact-tile{
    display:flex;
    align-items:center;
    gap: 20px;
    padding: 26px 28px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: rgba(255,255,255,0.02);
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
  }
  .contact-tile:hover, .contact-tile:focus-visible{
    border-color: var(--hairline-strong);
    background: rgba(212,175,55,0.05);
    transform: translateY(-2px);
  }
  .contact-tile:focus-visible{ outline: 2px solid var(--gold); outline-offset:3px; }
  .contact-icon{
    flex-shrink:0;
    width: 52px; height:52px;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg, rgba(212,175,55,0.16), rgba(212,175,55,0.04));
    border: 1px solid var(--hairline-strong);
    color: var(--gold-soft);
  }
  .contact-icon svg{ width:22px; height:22px; }
  .contact-text{ display:flex; flex-direction:column; gap:4px; }
  .contact-label{
    font-size:0.8rem;
    color: var(--ink-faint);
    letter-spacing:0.04em;
  }
  .contact-value{
    font-family: var(--serif);
    font-size:1.3rem;
    color: var(--champagne);
  }
  .contact-note{
    margin-top: 26px;
    color: var(--ink-faint);
    font-size: 0.88rem;
  }
  .map-embed{
    margin-top: 28px;
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid var(--hairline);
    aspect-ratio: 16/7;
    filter: grayscale(0.15) contrast(1.05);
  }
  @media (max-width: 560px){
    .map-embed{ aspect-ratio: 4/3; }
  }


  /* follow us (contact) */
  .social-heading{
    font-family: var(--serif); font-weight:500;
    font-size:1.4rem; color: var(--champagne);
    margin: 34px 0 16px;
  }

  /* newsletter feeds */
  .feed-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px;
    align-items:start;
  }
  .feed-col{ margin:0; display:flex; flex-direction:column; gap:12px; }
  .feed-col figcaption{ display:flex; align-items:center; gap:10px; font-size:0.9rem; color: var(--ink-dim); }
  .feed-col figcaption a:hover, .feed-col figcaption a:focus-visible{ color: var(--gold-soft); }
  .feed-icon{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--hairline-strong); color: var(--gold-soft);
    background: linear-gradient(180deg, rgba(212,175,55,0.16), rgba(212,175,55,0.04));
  }
  .feed-icon svg{ width:17px; height:17px; }
  .feed-box{
    position:relative; width:100%; max-width:500px; height:640px; margin:0 auto;
    border-radius:14px; overflow:hidden;
    border:1px solid var(--hairline); background:#fff;
  }
  .feed-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .feed-box.tt{ overflow-y:auto; background:#fff; }
  .feed-box.tt iframe{ position:static; height:auto; min-height:600px; }
  .feed-box.tt blockquote{ margin:0; }

  /* ============ DONATE ============ */
  .donate-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 22px;
  }
  .donate-card{
    padding: 26px 28px;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    background: rgba(255,255,255,0.02);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .donate-card:hover{
    border-color: var(--hairline-strong);
    background: rgba(212,175,55,0.05);
    transform: translateY(-2px);
  }
  .donate-card h3{
    font-family: var(--serif);
    font-size:1.35rem;
    color: var(--champagne);
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom: 1px solid var(--hairline);
  }
  .donate-card p{
    color: var(--ink-dim);
    font-size:0.96rem;
    margin-bottom:8px;
  }
  .donate-card p:last-child{ margin-bottom:0; }
  .donate-highlight{
    font-family: var(--serif);
    font-size:1.6rem;
    color: var(--gold-soft);
  }
  .donate-online{
    margin-top: 30px;
    display:flex;
    justify-content:center;
  }

  /* ============ FOOTER ============ */
  footer{
    border-top: 1px solid var(--hairline);
    padding: 40px 0;
  }
  footer .wrap{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  }
  footer p{ font-size:0.78rem; }
  }
  footer p{ color: var(--ink-faint); font-size:0.85rem; }
  footer .foot-links{ display:flex; gap:20px; font-size:0.85rem; color: var(--ink-faint); }
  footer .foot-links a:hover{ color: var(--gold-soft); }



  /* =================== DESIGN ENRICHMENT =================== */
  .hero-mark{ position:relative; }
  /* ornament divider */
  .ornament{
    display:flex; align-items:center; justify-content:center; gap:18px;
    color: var(--gold);
    margin: clamp(-30px, -4vw, -10px) auto clamp(26px, 5vw, 44px);
  }
  .ornament svg{ width:34px; height:34px; flex-shrink:0; filter: drop-shadow(0 0 8px rgba(212,175,55,0.45)); }
  .orn-line{ height:1px; flex:0 1 220px; background: linear-gradient(90deg, transparent, var(--gold)); }
  .orn-line:last-child{ background: linear-gradient(90deg, var(--gold), transparent); }

  /* section headings: gold accent bar + ornamental dot */
  .panel-head{ position:relative; }
  .panel-head::after{
    content:""; position:absolute; left:0; bottom:-1px;
    width:92px; height:2px; border-radius:2px;
    background: linear-gradient(90deg, var(--gold-soft), var(--gold), transparent);
    box-shadow: 0 0 12px rgba(212,175,55,0.55);
  }

  /* tab bar: faint gold glow line along the top */
  .tabs{ position:relative; box-shadow: inset 0 1px 0 rgba(242,215,140,0.14), 0 10px 40px rgba(0,0,0,0.35); }

  .ministry-icon, .contact-icon, .feed-icon{ box-shadow: 0 0 18px rgba(212,175,55,0.18), inset 0 1px 0 rgba(255,255,255,0.08); }

  @media (max-width: 720px){
    .ornament{ gap:12px; }
    .orn-line{ flex-basis:90px; }
  }
  @media (prefers-reduced-motion: reduce){
  }


  /* ===== top bar: logo left, Menu + language right ===== */
  .site-nav .wrap{ grid-template-columns: auto 1fr auto; grid-template-areas: "brand . right"; }
  .site-nav .brand{ grid-area: brand; }
  .site-nav .nav-right{ grid-area: right; grid-column:auto; display:flex; align-items:center; gap:10px; }
  .nav-menu-btn, .lang-switch select{ min-height:38px; }
  .nav-menu-panel a[aria-current="page"]{
    color: var(--gold-soft); background: rgba(212,175,55,0.08); border-color: var(--hairline-strong);
  }
  .nav-menu-panel a[aria-current="page"]::before{ opacity:1; }
  .nav-menu-panel a{ min-height:44px; }

  /* ===== inner page titles ===== */
  .page-title{
    position:relative; text-align:center;
    padding: clamp(36px, 7vw, 76px) 0 clamp(24px, 4vw, 36px);
    isolation:isolate;
  }
  .page-title::before{   /* faint church emblem behind the title */
    content:""; position:absolute; left:50%; top:50%;
    width: clamp(220px, 30vw, 340px); aspect-ratio:1;
    transform: translate(-50%, -50%);
    background: url("img/logo-large.png") center / contain no-repeat;
    opacity:0.05; z-index:-1; pointer-events:none;
  }
  .page-title h1{
    font-family: var(--serif); font-weight:600;
    font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height:1.05;
    color: var(--champagne); margin:0;
    opacity:0; animation: rise 0.9s var(--ease) 0.1s forwards;
  }
  .page-title p{
    font-family: var(--serif); font-style:italic;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    color: var(--gold-soft); margin:10px 0 0;
    opacity:0; animation: rise 0.9s var(--ease) 0.25s forwards;
  }
  .page-title .page-orn{ margin: 20px auto 0; opacity:0; animation: rise 0.9s var(--ease) 0.4s forwards; }
  .page-main .panel-stage{ margin-top:0; }
  @media (prefers-reduced-motion: reduce){
    .page-title h1, .page-title p, .page-title .page-orn{ opacity:1; animation:none; }
  }


  /* ===== church address in more places ===== */
  .hero-addr, .foot-addr{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
  .hero-addr svg, .foot-addr svg, .where-icon svg{ width:18px; height:18px; flex-shrink:0; color: var(--gold); }
  .hero-addr{
    margin-top:22px; font-size:0.98rem; color: var(--ink);
    padding:8px 16px; border-radius:999px;
    background: rgba(11,11,11,0.45); border:1px solid var(--hairline);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity:0; animation: rise 1s var(--ease) 1.1s forwards;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  .hero-addr:hover{ border-color: var(--hairline-strong); color: var(--champagne); }
  footer .foot-top{ display:flex; justify-content:center; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--hairline); }
  .foot-info{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 26px; font-size:0.95rem; }
  .foot-addr{ color: var(--ink); }
  .foot-addr:hover, .foot-phone:hover{ color: var(--gold-soft); }
  .foot-phone{ color: var(--ink-dim); text-decoration:none; }
  .where-note{
    display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
    margin-top:26px; padding:16px 20px;
    border:1px solid var(--hairline); border-radius:14px;
    background: rgba(212,175,55,0.05);
  }
  .where-note p{ margin:0; flex:1; min-width:220px; color: var(--ink-dim); }
  .where-note strong{ color: var(--champagne); font-weight:600; }
  .where-icon{ display:flex; }
  .where-link{ color: var(--gold-soft); text-decoration:underline; text-underline-offset:4px; text-decoration-color: rgba(212,175,55,0.45); font-weight:600; white-space:nowrap; }
  @media (prefers-reduced-motion: reduce){ .hero-addr{ opacity:1; animation:none; } }


  /* ===== location card (home + schedule) ===== */
  .loc-wrap{ margin-top: clamp(28px, 5vw, 48px); }
  .loc-grid{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap:20px; align-items:stretch; }
  .loc-card{ display:flex; flex-direction:column; }
  .loc-row .time{ text-decoration:none; }
  .loc-row a.time:hover{ text-decoration:underline; text-underline-offset:3px; }
  .loc-note{ color: var(--ink-dim); font-size:0.92rem; margin:16px 0 18px; }
  .loc-btn{ margin-top:auto; align-self:flex-start; white-space:nowrap; }
  .loc-map{
    position:relative; min-height:280px;
    border:1px solid var(--hairline); border-radius:16px; overflow:hidden;
    background: rgba(19,18,17,0.6);
  }
  .loc-map iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
    filter: grayscale(0.35) brightness(0.9) contrast(1.05);
  }
  @media (max-width: 760px){
    .loc-grid{ grid-template-columns: 1fr; }
    .loc-map{ min-height:230px; }
    .loc-btn{ align-self:stretch; text-align:center; justify-content:center; }
  }

  /* =================== MOBILE (phones & small tablets only) =================== */
  @media (max-width: 720px){
    /* nav */
    .site-nav .wrap{ padding-top:10px; padding-bottom:10px; column-gap:10px; }
    .brand{ font-size:1.1rem; gap:9px; }
    .brand .mark{ width:44px; height:44px; }
    .nav-right{ gap:8px; }
    .lang-switch select{ padding:7px 26px 7px 10px; font-size:0.78rem; }

    /* hero */
    .hero-cta{ flex-direction:column; align-items:stretch; max-width:340px; margin-left:auto; margin-right:auto; }
    .hero-cta .btn{ text-align:center; justify-content:center; }

    /* section tabs: one swipeable row instead of a wrapped block */
    .tabs{
      position:relative; flex-wrap:nowrap; justify-content:flex-start;
      max-width:100%; overflow-x:auto; overscroll-behavior-x:contain;
      border-radius:18px; scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .tabs::-webkit-scrollbar{ display:none; }
    .tab-btn{ flex:0 0 auto; padding:10px 16px; font-size:0.82rem; scroll-snap-align:center; }


    /* panels & cards */
    .panel-head{ margin-bottom:22px; padding-bottom:14px; }
    .day-group, .donate-card, .contact-tile{ padding:20px; }
    .contact-tile{ gap:14px; }
    .contact-icon{ width:44px; height:44px; }
    .contact-value{ font-size:1.1rem; overflow-wrap:anywhere; }

    /* ministries: slower on phones */
    .min-arrow{ width:40px; height:40px; }
    .min-arrow.prev{ left:-4px; }
    .min-arrow.next{ right:-4px; }
    .ministry-track .ministry-card{ flex-basis:min(78vw, 260px); margin-right:16px; padding:22px 20px; }

    /* social feeds */
    .feed-grid{ gap:22px; }
    .feed-box{ height:520px; }

    /* forms: 16px text stops iPhones from zooming in on tap */
    .signup-form input, .signup-form select, .signup-form textarea{ font-size:16px; }
    .signup-form .btn{ justify-self:stretch; text-align:center; }

    /* footer */
    footer{ padding:28px 0; }
    footer .wrap{ flex-direction:column; text-align:center; }
    footer .foot-links{ flex-wrap:wrap; justify-content:center; gap:10px 16px; }
  }
  @media (max-width: 380px){
    .brand{ font-size:1rem; }
    .brand .mark{ width:38px; height:38px; }
    .tab-btn{ padding:9px 13px; }
  }

  /* ===== multi-page additions ===== */
  a.tab-btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
  .page-main{ padding-top:0; padding-bottom: clamp(28px, 5vw, 56px); }
  .hub + .hub{ margin-top: clamp(28px, 5vw, 48px); }
  .events-more{ margin-top:24px; display:flex; justify-content:center; }
  .events-empty{ color: var(--ink-dim); font-style:italic; padding: 8px 0 4px; }
  .event-place{ color: var(--ink-dim); font-size:0.9rem; margin-top:4px; }
  .event-desc{ color: var(--ink-dim); font-size:0.92rem; margin-top:6px; line-height:1.5; }

  /* visually hidden, still read by Google and screen readers */
  .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  @media (max-width: 720px){ .hero-mark{ width: min(72vw, 320px); height: min(72vw, 320px); } }

  /* welcome area fills the screen below the top bar, so the video background is full */
  .hero-stage{
    min-height: calc(100vh - var(--nav-h, 88px));
    min-height: calc(100svh - var(--nav-h, 88px));
    display:flex; align-items:center;
  }
  .hero-stage .hero{ width:100%; }

  /* phones: menu drops down full-width under the top bar */
  @media (max-width: 720px){
    .nav-menu{ position:static; }
    .site-nav .wrap{ position:relative; }
    .nav-menu-panel{
      left:16px; right:16px; width:auto;
      top: calc(100% + 8px);
      transform-origin: top center;
    }
  }

/* =================== MODERN THEME =================== */
@font-face{ font-family:"COGWC Display"; src:url("fonts/InterDisplay-SemiBold.woff") format("woff"); font-weight:600; font-display:swap; }
@font-face{ font-family:"COGWC Display"; src:url("fonts/InterDisplay-Bold.woff") format("woff"); font-weight:700; font-display:swap; }
@font-face{ font-family:"COGWC Text"; src:url("fonts/Inter-Regular.woff") format("woff"); font-weight:400; font-display:swap; }
@font-face{ font-family:"COGWC Text"; src:url("fonts/Inter-Medium.woff") format("woff"); font-weight:500; font-display:swap; }
@font-face{ font-family:"COGWC Text"; src:url("fonts/Inter-SemiBold.woff") format("woff"); font-weight:600; font-display:swap; }
:root{
  --serif: "COGWC Display", "Inter", -apple-system, sans-serif;
  --sans: "COGWC Text", "Inter", -apple-system, sans-serif;
  --champagne:#ffffff;
  --ink:#f2f2f2;
  --ink-dim:#b4b4b4;
  --ink-faint:#8a8a8a;
  --hairline: rgba(255,255,255,0.10);
  --hairline-strong: rgba(255,255,255,0.22);
}
body{ font-weight:400; letter-spacing:-0.003em; }
/* bold, tight headings in white */
h1, h2, h3, .page-title h1, .panel-head h2, .hero h1, .event-details h3, .day-label, .contact-value, .loc-address{
  font-weight:700 !important; letter-spacing:-0.025em;
}
.page-title h1{ font-size: clamp(2.6rem, 6vw, 4.2rem); }
.panel-head h2{ font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
/* no more italics: subtitles become clean gold text */
.page-title p, .mission-quote, .hero-kicker, .day-label, .banner-sub, .letter-label{
  font-style:normal !important;
}
.page-title p{ font-family:var(--sans); font-weight:500; font-size: clamp(1rem, 1.8vw, 1.15rem); color:var(--gold-soft); letter-spacing:0; }
.mission-quote{ font-weight:600 !important; font-size: clamp(1.4rem, 3vw, 2rem); line-height:1.35; letter-spacing:-0.02em; }
.mission-label{ letter-spacing:0.02em !important; text-transform:none; font-size:0.95rem; }
.panel-head .panel-sub{ color:var(--ink-faint); }
/* flatter, cleaner surfaces */
.panel-stage{ background: rgba(14,14,14,0.86) !important; border:1px solid var(--hairline) !important; box-shadow: 0 30px 80px rgba(0,0,0,0.45) !important; border-radius:20px !important; }
.panel-stage::before, .panel-head::after{ display:none !important; }
.panel-head{ border-bottom:1px solid var(--hairline) !important; }
.day-group, .event-card, .ministry-card, .contact-tile, .donate-card, .visit-card{
  background: rgba(255,255,255,0.035) !important; border:1px solid var(--hairline) !important; border-radius:16px !important;
}
.day-group:hover, .event-card:hover, .ministry-card:hover, .contact-tile:hover, .donate-card:hover{ border-color: var(--hairline-strong) !important; background: rgba(255,255,255,0.06) !important; }
.day-label::before{ display:none !important; }
.service-row .time, .event-month{ color: var(--gold) !important; }
.event-date{ background: rgba(255,255,255,0.05) !important; border:1px solid var(--hairline) !important; }
/* buttons: solid gold and clean outline */
.btn{ font-family:var(--sans); font-weight:600; letter-spacing:-0.005em; }
.btn-primary{ background: var(--gold) !important; color:#111 !important; box-shadow:none !important; }
.btn-primary:hover{ background: var(--gold-soft) !important; }
.btn-ghost{ border-color: rgba(255,255,255,0.3) !important; color:#fff !important; }
.btn-ghost:hover{ border-color:#fff !important; background: rgba(255,255,255,0.06) !important; }
/* top bar */
header.site-nav{ background: rgba(10,10,10,0.82) !important; border-bottom:1px solid var(--hairline) !important; }
.brand{ font-family:var(--serif); font-weight:700; letter-spacing:-0.01em; color:#fff !important; }
.nav-menu-btn, .lang-switch select{ border-color: var(--hairline-strong) !important; }
/* simpler divider */
.ornament svg, .page-orn svg{ display:none; }
.ornament .orn-line, .page-orn .orn-line{ flex:0 0 56px !important; height:2px !important; border-radius:2px; background: var(--gold) !important; }
.ornament .orn-line + .orn-line, .page-orn .orn-line + .orn-line{ display:none; }
.page-title::before{ opacity:0.035; }
.ornament .orn-line:last-child, .page-orn .orn-line:last-child{ display:none !important; }
.mission-card::before, .mission-card::after{ display:none !important; }
.mission-card{ background: rgba(14,14,14,0.78) !important; border:1px solid var(--hairline) !important; border-radius:20px !important; }
.nav-menu-btn{ text-transform:none !important; letter-spacing:0 !important; font-weight:600 !important; font-size:0.92rem !important; color:#fff !important; }

/* =================== PERSONALITY (on top of modern) =================== */
@font-face{ font-family:"COGWC Accent"; src:url("fonts/Lora-Italic-Variable.woff") format("woff"); font-weight:400 700; font-style:italic; font-display:swap; }
:root{
  --accent:"COGWC Accent", Georgia, serif;
  --champagne:#f7f0e1;                       /* warm white instead of pure white */
  --hairline: rgba(212,175,55,0.14);         /* lines pick up a hint of gold */
  --hairline-strong: rgba(212,175,55,0.38);
}
h1, h2, h3, .page-title h1, .panel-head h2, .hero h1{ color:var(--champagne); }

/* serif italic accents: subtitles, labels, the mission quote */
.page-title p, .hero-kicker, .panel-head .panel-sub, .mission-label{
  font-family:var(--accent) !important; font-style:italic !important; font-weight:500 !important;
  color:var(--gold-soft) !important; letter-spacing:0 !important; text-transform:none !important;
}
.page-title p{ font-size:clamp(1.15rem, 2.2vw, 1.4rem); }
.hero-kicker{ font-size:clamp(1.15rem, 2.2vw, 1.35rem); }
.panel-head .panel-sub{ font-size:1.05rem; }
.mission-label{ font-size:1.15rem !important; }
.mission-quote{
  font-family:var(--accent) !important; font-style:italic !important; font-weight:500 !important;
  font-size:clamp(1.5rem, 3.2vw, 2.15rem) !important; line-height:1.4; letter-spacing:-0.005em !important; color:var(--champagne);
}

/* divider: the cross comes back, small and clean */
.ornament, .page-orn{ gap:16px !important; color:var(--gold); }
.ornament svg, .page-orn svg{ display:block !important; width:18px !important; height:18px !important; }
.ornament svg circle, .page-orn svg circle{ display:none; }
.ornament svg path, .page-orn svg path{ stroke-width:2.6; }
.ornament .orn-line, .page-orn .orn-line,
.ornament .orn-line:last-child, .page-orn .orn-line:last-child{
  display:block !important; flex:0 0 44px !important; height:2px !important; background:var(--gold) !important; opacity:0.9;
}

/* day names: small gold mark to the left */
.day-label{ display:flex; align-items:center; gap:12px; }
.day-label::after{ content:none; }
.day-group .day-label::before{
  content:"" !important; display:block !important; width:4px; height:1.05em; border-radius:2px; background:var(--gold); position:static !important;
}

/* cards: gold edge lights up on hover */
.day-group, .event-card, .ministry-card, .contact-tile, .donate-card{ transition:border-color .25s, background .25s, transform .25s; }
.event-card:hover, .ministry-card:hover, .contact-tile:hover, .donate-card:hover{ transform:translateY(-2px); }

/* event date: a solid gold tile */
.event-date{ background:var(--gold) !important; border:none !important; }
.event-month{ color:#3a2d06 !important; }
.event-day{ font-family:var(--serif); font-weight:700; color:#111 !important; }

/* buttons: rounded pills */
.btn{ border-radius:999px !important; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(212,175,55,0.28) !important; }
.event-date{ width:88px; min-width:88px; box-sizing:border-box; }
.ornament svg, .page-orn svg{ width:22px !important; height:22px !important; }
@media (max-width:600px){ .event-date{ width:72px; min-width:72px; } }

/* =================== PERSONALITY v2: bolder =================== */
/* last word of big headings in gold serif italic */
h1 em.accent, h2 em.accent{
  font-family:var(--accent); font-style:italic; font-weight:500; color:var(--gold-soft);
  letter-spacing:-0.01em; font-size:1.06em;
}
/* gold "Live every Sunday" band under the hero */
.live-band{ display:block; position:relative; z-index:2; background:var(--gold); color:#141005; text-decoration:none; }
.live-band:hover{ background:var(--gold-soft); }
.live-band-in{
  max-width:1180px; margin:0 auto; padding:26px 24px;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.live-dot{ width:16px; height:16px; border-radius:50%; background:#d62828; box-shadow:0 0 0 5px rgba(214,40,40,0.22); animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse{ 50%{ box-shadow:0 0 0 10px rgba(214,40,40,0); } }
.live-band-text{ font-family:var(--serif); font-weight:700; font-size:clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing:-0.02em; }
.live-band-text b{ font-family:var(--accent); font-style:italic; font-weight:600; }
.live-band-cta{
  font-family:var(--sans); font-weight:600; font-size:1rem; padding:10px 20px; border-radius:999px;
  border:1.5px solid rgba(20,16,5,0.55); margin-left:10px;
}
.live-band:hover .live-band-cta{ background:#141005; color:var(--gold-soft); border-color:#141005; }
@media (max-width:600px){ .live-band-cta{ margin-left:0; } .live-band-in{ gap:12px; padding:22px 16px; } }
/* bigger, bolder service times */
.service-row .time{ font-size:1.08em; font-weight:600; }

/* =================== HOME v3: open, editorial sections =================== */
.x-section{ position:relative; z-index:1; background:#0d0c0a; padding:clamp(80px, 11vw, 150px) 0; }
.x-section + .x-section{ border-top:1px solid rgba(212,175,55,0.12); }
.x-location{ background:#12110e; }
.x-kicker{
  display:block; font-family:var(--accent); font-style:italic; font-weight:500;
  font-size:clamp(1.2rem, 2vw, 1.45rem); color:var(--gold-soft); margin-bottom:14px;
}
.x-h{ font-family:var(--serif); font-weight:700; font-size:clamp(2.2rem, 4.6vw, 3.6rem); line-height:1.02; letter-spacing:-0.03em; color:var(--champagne); margin:0; }
.x-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.x-link{ font-family:var(--sans); font-weight:600; color:var(--gold-soft); display:inline-flex; gap:8px; align-items:center; }
.x-link span:last-child{ transition:transform .25s; }
.x-link:hover span:last-child{ transform:translateX(5px); }

/* mission: open window onto the photo */
.x-mission{ position:relative; z-index:1; padding:clamp(110px, 15vw, 200px) 0; }
.x-mission::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,8,8,0.82), rgba(8,8,8,0.35)); z-index:-1; }
.x-mission .wrap{ max-width:1180px; }
.x-quote-mark{
  display:block; font-family:var(--accent); font-style:italic; font-size:clamp(7rem, 14vw, 11rem);
  line-height:0.6; height:0.45em; color:var(--gold); opacity:0.9; margin-bottom:10px;
}
.x-mission-text{
  font-family:var(--accent); font-style:italic; font-weight:500;
  font-size:clamp(1.9rem, 4.4vw, 3.6rem); line-height:1.22; letter-spacing:-0.015em;
  color:var(--champagne); max-width:24ch; margin:0;
}

/* this sunday + the week */
.x-week-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(48px, 7vw, 110px); align-items:center; }
.x-big-time{
  font-family:var(--serif); font-weight:700; font-size:clamp(7.5rem, 17vw, 13.5rem);
  line-height:0.82; letter-spacing:-0.06em; color:var(--champagne); display:flex; align-items:flex-start; gap:0.08em;
}
.x-big-time span{ font-family:var(--accent); font-style:italic; font-weight:500; font-size:0.32em; letter-spacing:0; color:var(--gold); margin-top:0.25em; }
.x-big-name{ font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem, 3vw, 2.4rem); letter-spacing:-0.02em; color:var(--champagne); margin:22px 0 6px; }
.x-small-line{ font-size:1.1rem; color:var(--ink-dim); margin:0; }
.x-weekly .x-h{ margin-bottom:26px; }
.x-row{
  display:grid; grid-template-columns:7.5rem 1fr auto; gap:18px; align-items:baseline;
  padding:24px 4px; border-bottom:1px solid rgba(212,175,55,0.16); color:inherit;
  transition:padding .3s var(--ease), background .3s;
}
.x-row:first-of-type{ border-top:1px solid rgba(212,175,55,0.16); }
.x-row:hover{ padding-left:16px; background:linear-gradient(90deg, rgba(212,175,55,0.08), transparent 70%); }
.x-day{ font-family:var(--accent); font-style:italic; font-size:1.2rem; color:var(--gold-soft); }
.x-what{ font-family:var(--serif); font-weight:700; font-size:clamp(1.25rem, 2vw, 1.55rem); letter-spacing:-0.015em; color:var(--champagne); }
.x-when{ font-weight:600; font-size:1.05rem; color:var(--gold); white-space:nowrap; }
.x-weekly .x-link{ margin-top:26px; }

/* location */
.x-loc-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px, 6vw, 90px); align-items:center; }
.x-address{ font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem, 5vw, 3.8rem); line-height:1; letter-spacing:-0.03em; color:var(--champagne); margin:0; }
.x-city{ font-family:var(--accent); font-style:italic; font-size:clamp(1.4rem, 2.4vw, 1.8rem); color:var(--gold-soft); margin:12px 0 22px; }
.x-phone{ font-weight:600; font-size:1.2rem; color:var(--ink); border-bottom:1px solid rgba(212,175,55,0.5); padding-bottom:2px; }
.x-phone:hover{ color:var(--gold-soft); }
.x-map{ border-radius:22px; overflow:hidden; border:1px solid rgba(212,175,55,0.22); aspect-ratio:4/3; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.x-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(1) invert(0.9) contrast(0.95) brightness(0.95) sepia(0.25); }

/* events */
.x-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
.x-events .event-card{ background:#15130f !important; }

/* scroll reveal */
.reveal-on .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-on .reveal.in{ opacity:1; transform:none; }
.reveal-on .x-week-grid .reveal:nth-child(2), .reveal-on .x-loc-grid .reveal:nth-child(2){ transition-delay:.15s; }

@media (max-width:860px){
  .x-week-grid, .x-loc-grid{ grid-template-columns:1fr; }
  .x-row{ grid-template-columns:1fr auto; row-gap:4px; }
  .x-day{ grid-column:1 / -1; }
  .x-mission::before{ background:rgba(8,8,8,0.72); }
}
.x-row{ grid-template-columns:6.5rem 1fr auto; }
.x-map{ background:#1c1a16; }
@media (max-width:600px){
  .x-row{ grid-template-columns:1fr; row-gap:6px; }
  .event-date{ width:80px; min-width:80px; padding:10px 6px; }
  .event-day{ font-size:1.45rem !important; white-space:nowrap; }
}

/* =================== HOME v4: first visit, countdown, latest message, ministries =================== */
.x-first, .x-sermon{ background:#12110e; }
.x-mins{ background:#0d0c0a; }
.x-body{ font-size:1.12rem; line-height:1.7; color:var(--ink-dim); max-width:34ch; margin:18px 0 0; }

/* countdown */
.x-countdown{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin:22px 0 0; min-height:1.6em; }
.x-countdown .cd-label{ font-family:var(--accent); font-style:italic; font-size:1.15rem; color:var(--gold-soft); margin-right:10px; }
.x-countdown b{ font-family:var(--serif); font-weight:700; font-size:1.7rem; letter-spacing:-0.02em; color:var(--champagne); font-variant-numeric:tabular-nums; }
.x-countdown i{ font-style:normal; font-size:1rem; color:var(--ink-dim); margin:0 10px 0 2px; }
.x-countdown .cd-live{ display:inline-flex; align-items:center; gap:10px; font-weight:700; color:#fff; background:#d62828; padding:8px 16px; border-radius:999px; }
.x-countdown .cd-live::before{ content:""; width:9px; height:9px; border-radius:50%; background:#fff; animation:livePulse 2s infinite; }
.live-band.is-live{ background:#d62828; color:#fff; }
.live-band.is-live .live-band-cta{ border-color:rgba(255,255,255,.7); }

/* first visit steps */
.x-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 36px); }
.x-step{ position:relative; padding:34px 30px 32px; border-radius:22px; background:rgba(255,255,255,0.03);
  border:1px solid rgba(212,175,55,0.16); transition:border-color .3s, transform .3s var(--ease), background .3s; }
.x-step:hover{ border-color:rgba(212,175,55,0.45); transform:translateY(-4px); background:rgba(212,175,55,0.05); }
.x-num{ display:block; font-family:var(--accent); font-style:italic; font-weight:500; font-size:3.4rem; line-height:1; color:var(--gold); margin-bottom:22px; }
.x-step h3{ font-family:var(--serif); font-weight:700; font-size:1.55rem; letter-spacing:-0.02em; color:var(--champagne); margin:0 0 10px; }
.x-step p{ font-size:1.05rem; line-height:1.65; color:var(--ink-dim); margin:0; }
.reveal-on .x-steps .reveal:nth-child(2){ transition-delay:.12s; }
.reveal-on .x-steps .reveal:nth-child(3){ transition-delay:.24s; }

/* latest message */
.x-sermon-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px, 6vw, 90px); align-items:center; }
.x-video{ position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#000;
  border:1px solid rgba(212,175,55,0.3); box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 8px rgba(212,175,55,0.04); }
.x-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ministries chips */
.x-chips{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.x-chip{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:16px; color:var(--champagne);
  background:rgba(255,255,255,0.03); border:1px solid rgba(212,175,55,0.16);
  font-family:var(--serif); font-weight:600; font-size:1.08rem; letter-spacing:-0.01em;
  transition:border-color .25s, background .25s, transform .25s var(--ease); }
.x-chip:hover{ border-color:rgba(212,175,55,0.5); background:rgba(212,175,55,0.07); transform:translateY(-2px); }
.x-chip-icon{ flex:0 0 42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--gold); background:rgba(212,175,55,0.1); }
.x-chip-icon svg{ width:22px; height:22px; }

@media (max-width:860px){
  .x-steps{ grid-template-columns:1fr; }
  .x-sermon-grid{ grid-template-columns:1fr; }
  .x-chips{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px){ .x-chip{ padding:14px; font-size:.98rem; gap:10px; } .x-chip-icon{ flex-basis:36px; height:36px; } }
.x-sermon-grid{ grid-template-columns:1fr 1.15fr; }
.x-sermon .x-h{ font-size:clamp(2.2rem, 4vw, 3.2rem); }
.live-band.is-live .live-dot{ background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.3); }
/* five ministry groups on the home page */
.x-chips{ grid-template-columns:repeat(5, 1fr); }
.x-chip{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px 20px 24px; font-size:1.15rem; }
.x-chip-icon{ flex:0 0 auto; width:48px; height:48px; }
@media (max-width:1000px){ .x-chips{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:860px){ .x-chips{ grid-template-columns:repeat(2, 1fr); } .x-chip:last-child:nth-child(odd){ grid-column:1 / -1; } }
.foot-tag{ font-family:var(--accent); font-style:italic; color:var(--gold-soft); font-size:1.05rem; margin:0 0 10px; text-align:center; width:100%; }
/* date ranges like 24–31 stay on one line */
.event-date{ width:110px !important; min-width:110px !important; padding:10px 8px !important; }
.event-day{ white-space:nowrap; }
@media (max-width:600px){ .event-date{ width:92px !important; min-width:92px !important; } .event-day{ font-size:1.3rem !important; } }

/* =================== final polish =================== */
/* donate: three ways to give side by side */
.donate-grid{ grid-template-columns:repeat(3, 1fr) !important; }
.donate-highlight{ font-family:var(--serif); font-weight:700; font-size:1.6rem !important; letter-spacing:-0.02em; color:var(--gold-soft) !important; }
@media (max-width:860px){ .donate-grid{ grid-template-columns:1fr !important; } }
/* latest-message section stacks on phones and tablets */
@media (max-width:860px){
  .x-sermon-grid{ grid-template-columns:1fr !important; }
  .x-body{ max-width:none; }
}
/* weekly rows: give the ministry name room on tablets and phones */
@media (max-width:860px){ .x-row{ grid-template-columns:1fr auto !important; } .x-day{ grid-column:1 / -1; } }
@media (max-width:600px){ .x-row{ grid-template-columns:1fr !important; } }
/* countdown: label on its own line on small phones, numbers never split */
@media (max-width:480px){
  .x-countdown .cd-label{ flex-basis:100%; margin:0 0 4px; }
  .x-countdown b{ font-size:1.5rem; }
  .x-countdown i{ margin-right:8px; }
}

/* =================== COGWC TV =================== */
.tv-hero{ position:relative; z-index:1; padding:clamp(60px, 9vw, 120px) 0 clamp(80px, 11vw, 150px); }
.tv-wrap{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(36px, 5vw, 80px); align-items:center; }
.tv-screen{ position:relative; aspect-ratio:16/9; border-radius:24px; overflow:hidden; background:#000;
  border:1px solid rgba(212,175,55,0.35); box-shadow:0 40px 100px rgba(0,0,0,0.6), 0 0 0 8px rgba(212,175,55,0.04); }
.tv-screen video{ width:100%; height:100%; display:block; object-fit:cover; }
.tv-screen .tv-soon{ position:absolute; top:18px; left:18px; }
.tv-soon{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; background:var(--gold); color:#141005;
  font-family:var(--sans); font-weight:700; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; }
.tv-soon::before{ content:""; width:8px; height:8px; border-radius:50%; background:#141005; animation:livePulse 2s infinite; }
.tv-text .x-h{ margin-top:6px; }
.tv-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.tv-list li{ display:flex; align-items:center; gap:14px; font-size:1.08rem; color:var(--ink); }
.tv-list li::before{ content:""; flex:0 0 8px; height:8px; border-radius:50%; background:var(--gold); }
/* home teaser */
.x-tv{ background:#0d0c0a; }
.x-tv-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(36px, 6vw, 90px); align-items:center; }
.x-tv-logo{ display:block; padding:clamp(28px, 4vw, 54px); border-radius:24px; background:radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.12), rgba(255,255,255,0.02));
  border:1px solid rgba(212,175,55,0.25); transition:border-color .3s, transform .3s var(--ease); }
.x-tv-logo:hover{ border-color:rgba(212,175,55,0.55); transform:translateY(-3px); }
.x-tv-logo img{ width:100%; height:auto; display:block; }
.x-tv .x-h{ margin:16px 0 0; }
.x-tv .x-link{ margin-top:22px; }
@media (max-width:860px){ .tv-wrap, .x-tv-grid{ grid-template-columns:1fr; } }