/** Shopify CDN: Minification failed

Line 141:95 Unexpected "/"

**/
/* ============================================================================
   TCE BASE — global site chrome  ·  v1.1
   ----------------------------------------------------------------------------
   DISPLAY layer (2 of 4). Element-level + Horizon-component rules, all reading
   from tce-tokens.css. This is the dark theme proper.

   `!important` appears only where it must beat Horizon's per-scheme inline
   variables or component styles; it is intentional and scoped, not a layer war.

   >>> BUTTONS ARE NOT IN THIS FILE. <<<
   v1.1 (12 Jul 2026) removed the entire legacy button system from here — the
   old § 2 BUTTONS block and the `.tce .btn` body-scoped block (21 rules, all
   !important). They fought every attempt to standardise buttons and forced the
   button standard to answer with !important of its own.
   The single source of truth for every button on the site is now:

       assets/tce-button.css   (loaded LAST by snippets/stylesheets.liquid)

   Do NOT add button rules back into this file. Ever.

   Sections:
     1. Global base (html/body/main, colour schemes, type, links)
     2. [REMOVED — buttons live in tce-button.css]
     3. Forms + inputs (global)
     4. Cards / product / cart / search / misc chrome
     5. Footer  (dark navy — readability fix)
     6. Header offsets / template padding
     7. Mobile menu drawer
     8. Facets / filter popovers
     9. Product page chrome
    10. .tce landing core system (type, hero, sections, bg-*, cards, form,
        stats, scripture, dox, gift, waves)
============================================================================ */

/* === 1. GLOBAL BASE ====================================================== */
/* Horizon's compiled styles.css loads alongside this file and paints body +
   every colour-scheme surface from its OWN light palette. To make the dark
   theme the baseline (incl. off-canvas chrome: cart drawer, search modal,
   pop-overs, quick-add) these platform-level surfaces MUST be forced — this is
   the one legitimate use of !important: overriding the platform, not our own. */
html,body{ background-color:var(--surface-page)!important; color:var(--text); font-family:var(--tce-body); }
body{
  background-image:radial-gradient(1200px 520px at 80% -8%, rgba(118,174,187,.10), transparent 60%);
  background-attachment:fixed;
}
main#MainContent{ background-color:var(--surface-page)!important; }

/* Horizon paints sections via per-scheme --color-* vars. Re-point them dark so
   native templates (product/collection/cart/search/404/blog) + overlays inherit
   the theme. !important so it beats Horizon's compiled color-scheme rules. */
.color-scheme-1,.color-1,[class*="color-scheme"]{
  --color-background:var(--surface-page)!important;
  --color-foreground:var(--text)!important;
  background-color:var(--surface-page)!important;
  color:var(--text)!important;
}
.shopify-section .section-background,.section-background{ background-color:transparent!important; }

/* The HEADER is transparent by design (tce-header-redesign owns it) so the nav
   sits cleanly over the hero. But its inline nav bar and action buttons also
   carry color-scheme-* classes, so the rule above would paint a dark box behind
   the nav text. Exempt the header CHROME only — higher specificity than the
   blanket rule so it wins. Dropdown panels (.menu-list__submenu) and the mobile
   menu-drawer are NOT exempted: they keep the dark fill (handled elsewhere) so
   their text stays readable against page content. */
header-component .overflow-menu,
header-component .menu-list,
header-component .header-actions__action,
header-component .account-button,
.header .overflow-menu,
.header .menu-list{
  background-color:transparent!important;
}
/* NB: the mega-menu DROPDOWN panel keeps the appearance set by the header
   redesign (tce-header-redesign owns the open-menu treatment); the blanket
   color-scheme darkening is intentionally not re-applied to it here. */

/* Typography */
h1,h2,h3,h4,h5,h6{ font-family:var(--tce-h3); }
h1{ font-family:var(--tce-h2); color:var(--heading); font-weight:700; letter-spacing:.01em; line-height:1.1; margin:0 0 .3em; }
h2{ font-family:var(--tce-h2); color:var(--heading); letter-spacing:.01em; }
h3{ font-family:var(--tce-h3); color:var(--heading-alt); letter-spacing:.04em; text-transform:uppercase; }
h4{ font-family:var(--tce-h4); color:var(--heading); letter-spacing:.04em; text-transform:uppercase; }
h5{ font-family:var(--tce-body); font-weight:600; color:var(--text); }
h6{ font-family:var(--tce-body); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-size:.85em; }

p,li,dd,dt,label,.rte,.rte *{ color:var(--text-muted); }
a{ color:var(--accent); }
a:hover{ color:var(--tce-teal-light); }
hr,.divider,hr.divider{ border-color:var(--border); }
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:var(--surface-deep); }
::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:var(--tce-teal-deep); }

/* === 2. BUTTONS ========================================================== */
/* DELETED in v1.1 — moved to assets/tce-button.css, the single source of truth.
   The old block defined: .button / .btn / .tce-btn base + :hover + :active,
   .button--secondary, .btn.navy, .btn.teal, .btn.gold (+:hover),
   .btn.ghost (+:hover), and .shopify-payment-button__button — all !important.
   Shop Pay is now deliberately left in Shopify's own branded style.
   DO NOT RE-ADD BUTTON RULES HERE. */

/* === 3. FORMS + INPUTS (global) ========================================= */
/* 27 Sep 2026: tce-ui fields (.ui-input, the shared sheet) style themselves — skipped here. */
input[type="text"]:not(.ui-input),input[type="email"]:not(.ui-input),input[type="tel"]:not(.ui-input),input[type="number"]:not(.ui-input),
input[type="password"]:not(.ui-input),input[type="search"]:not(.ui-input),select:not(.ui-input),textarea:not(.ui-input){
  border-radius:10px!important; border:1px solid var(--border-strong)!important;
  font-family:var(--tce-body)!important; background:rgba(255,255,255,.06)!important; color:var(--text)!important;
}
input:not(.ui-input)::placeholder,textarea:not(.ui-input)::placeholder{ color:var(--text-subtle)!important; }
input:not(.ui-input):focus,select:not(.ui-input):focus,textarea:not(.ui-input):focus{ outline:none!important; border-color:var(--accent)!important; box-shadow:0 0 0 4px rgba(118,174,187,.18)!important; }

/* === 4. CARDS / PRODUCT / CART / SEARCH / MISC =========================== */
.card,.product-card,.product-grid__card,.product-card-wrapper,.collection-card,.resource-card,
cart-drawer,.cart-drawer,.drawer,.popover,dialog,.quick-add-modal,.search-modal__content{
  background-color:var(--surface-card)!important; color:var(--text)!important;
}
.product-card,.product-grid__card,.product-card-wrapper{
  border-radius:12px!important; border:1px solid var(--border)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.3)!important; overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.product-card:hover,.product-card-wrapper:hover{ transform:translateY(-4px); }
.product-card__image-wrapper,.product__media-wrapper,.card__media{ background:var(--surface-band)!important; }
.product-card .price,.price,.price-item{ color:var(--accent)!important; }
.collection-card__content{ background:linear-gradient(to top,rgba(22,38,58,.9) 0%,rgba(74,138,153,.4) 60%,transparent 100%); }
.announcement-bar,.marquee{ background-color:var(--surface-navy)!important; color:var(--text)!important; }
.badge{ border-radius:6px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
cart-drawer,.cart-drawer{ border-left:4px solid var(--accent); }
.search-modal input,.search-modal__input{ border-bottom:2px solid var(--accent)!important; border-radius:0; }
td,th,.cart-items,.cart__row{ border-color:var(--border)!important; color:var(--text-muted)!important; }

/* === 5. FOOTER — dark navy, photo wash, readable cream/teal ==============
   27 Sep 2026: scoped to footer:not(.tce-foot) — the shared footer (snippets/tce-shell.liquid)
   styles itself, identically on both sites. Only a Horizon footer would still take these. */ */
html body footer:not(.tce-foot){
  position:relative; padding-top:14px!important; padding-bottom:8px!important;
  background-color:#0D1420!important;
  background-image:linear-gradient(180deg,rgba(13,20,32,.62) 0%,rgba(13,20,32,.74) 55%,rgba(13,20,32,.9) 100%),
                   url('https://images.unsplash.com/photo-1588317283112-f4d3a381e065?auto=format&fit=crop&w=1800&q=70')!important;
  background-size:cover!important; background-position:center 35%!important; background-repeat:no-repeat!important;
  border-top:1px solid var(--border)!important;
}
html body footer:not(.tce-foot) .section-background,html body footer:not(.tce-foot) .utilities{ background:transparent!important; }
html body footer:not(.tce-foot) :is(h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.menu__heading,.menu__heading__default){
  font-family:var(--tce-display)!important; text-transform:uppercase!important; letter-spacing:.15em!important;
  color:var(--text)!important; font-size:.82rem!important; line-height:1.25!important; font-weight:600!important; margin-bottom:8px!important;
}
html body footer:not(.tce-foot) a,html body footer:not(.tce-foot) .menu__item a{
  font-family:var(--tce-body)!important; text-transform:none!important; letter-spacing:.02em!important;
  font-weight:500!important; font-size:.88rem!important; color:var(--text-muted)!important; text-decoration:none!important;
}
html body footer:not(.tce-foot) a:hover{ color:var(--tce-teal-light)!important; }
html body footer:not(.tce-foot) .menu__subitem a{ font-size:.8rem!important; opacity:.82; }
html body footer:not(.tce-foot) p,html body footer:not(.tce-foot) span,html body footer:not(.tce-foot) li{ font-family:var(--tce-body)!important; color:var(--text-muted)!important; }
html body footer:not(.tce-foot) input[type='email'],html body footer:not(.tce-foot) input[type='text']{ background:rgba(255,255,255,.06)!important; border:1px solid rgba(250,244,230,.22)!important; color:var(--text)!important; border-radius:8px!important; }
html body footer:not(.tce-foot) input::placeholder{ color:var(--text-subtle)!important; }
/* NOTE: the footer's teal-dark `.button` / `button[type=submit]` colour overrides
   were REMOVED in v1.1 — the footer newsletter button now takes the site button
   standard from tce-button.css like every other button. The two `.button.link`
   rules below stay: they are NOT button styling, they strip a Horizon
   link-style button back to a plain text link. */
html body footer:not(.tce-foot) .button.link,html body footer:not(.tce-foot) a.link{ background:transparent!important; border:none!important; box-shadow:none!important; padding:0!important; color:var(--text-muted)!important; text-transform:none!important; letter-spacing:.02em!important; font-family:var(--tce-body)!important; font-weight:500!important; }
html body footer:not(.tce-foot) .button.link:hover,html body footer:not(.tce-foot) a.link:hover{ color:var(--tce-teal-light)!important; background:transparent!important; }
/* Most footer logos are white/mono → invert to read on navy. The dual-use
   TCE Academy + Caffeine Experience marks are shown as-is. */
html body footer:not(.tce-foot) .image-block__image,html body footer:not(.tce-foot) .group img{ filter:brightness(0) invert(1)!important; opacity:.78!important; transition:opacity .2s ease; }
html body footer:not(.tce-foot) .image-block:hover .image-block__image,html body footer:not(.tce-foot) .group img:hover{ opacity:1!important; }
html body footer:not(.tce-foot) img[src*='Caffeine_Experience'],html body footer:not(.tce-foot) img[src*='Academy']{ filter:none!important; opacity:.95!important; }
html body footer:not(.tce-foot) .utilities{ border-top:1px solid var(--border)!important; color:var(--text-subtle)!important; }
html body footer:not(.tce-foot) .utilities a{ color:var(--text-subtle)!important; }
html body footer:not(.tce-foot) .utilities a:hover{ color:var(--tce-teal-light)!important; }
html body footer:not(.tce-foot) .social-links svg,html body footer:not(.tce-foot) svg{ color:var(--text-muted)!important; }
html body footer:not(.tce-foot) .section{ padding-block-start:20px!important; padding-block-end:14px!important; }
html body footer:not(.tce-foot) .menu__list,html body footer:not(.tce-foot) ul,html body footer:not(.tce-foot) ol{ gap:1px!important; margin-block:0!important; }
html body footer:not(.tce-foot) .menu__item,html body footer:not(.tce-foot) .menu__subitem,html body footer:not(.tce-foot) li{ margin:0!important; }
html body footer:not(.tce-foot) .menu__item>a,html body footer:not(.tce-foot) .menu__subitem a{ padding-block:1px!important; line-height:1.25!important; }
html body footer:not(.tce-foot) .group{ row-gap:8px!important; }
html body footer:not(.tce-foot) .menu__item{ break-inside:avoid; -webkit-column-break-inside:avoid; }

/* === 6. HEADER OFFSETS — keep sticky/transparent header off page titles == */
main#MainContent[data-template^="page"],main#MainContent[data-template^="search"],
main#MainContent[data-template^="list-collections"],main#MainContent[data-template^="customers"],
main#MainContent[data-template^="404"],main#MainContent[data-template^="article"],
main#MainContent[data-template^="blog"]{ padding-top:calc(var(--header-group-height,120px) + 32px)!important; }
@media (max-width:750px){
  main#MainContent[data-template^="page"],main#MainContent[data-template^="search"],
  main#MainContent[data-template^="list-collections"],main#MainContent[data-template^="customers"],
  main#MainContent[data-template^="404"],main#MainContent[data-template^="article"],
  main#MainContent[data-template^="blog"]{ padding-top:calc(var(--header-group-height,96px) + 20px)!important; }
}
/* Any page that LEADS WITH A HERO owns its own top spacing — kill the section
   pad so the full-bleed hero sits under the (transparent) header. Template-
   agnostic via :has() so it's correct no matter which page template is used. */
main#MainContent:has(.tce-hero),main#MainContent:has(.sr-hero),
main#MainContent:has(.sch-hero),main#MainContent:has(.lvm-hero),
main#MainContent:has(.tce .hero),
main#MainContent[data-template="index"],main#MainContent[data-template^="page.kiosk"]{ padding-top:0!important; }

/* === 7. MOBILE MENU DRAWER — dark =====================================+== */
html body .menu-drawer,html body .menu-drawer__submenu{
  background-color:var(--surface-page)!important;
  background-image:radial-gradient(720px 280px at 12% -10%, rgba(118,174,187,.12), transparent 60%)!important;
  border-right:1px solid var(--border-strong)!important; color:var(--text)!important;
}
html body .menu-drawer .menu-drawer__menu-item,html body .menu-drawer .menu-drawer__menu-item-text{ color:var(--text-muted)!important; }
html body .menu-drawer .menu-drawer__menu-item--mainlist{ font-weight:600!important; }
html body .menu-drawer .menu-drawer__menu-item--child,html body .menu-drawer .menu-drawer__menu-item--child .menu-drawer__menu-item-text{ color:var(--text-subtle)!important; }
html body .menu-drawer .menu-drawer__menu-item:hover,html body .menu-drawer .menu-drawer__menu-item:hover .menu-drawer__menu-item-text,html body .menu-drawer .menu-drawer__menu-item--active{ color:var(--accent)!important; }
html body .menu-drawer svg,html body .menu-drawer .svg-wrapper{ color:var(--text-muted)!important; fill:currentColor!important; }
html body .menu-drawer .menu-drawer__close-button,html body .menu-drawer .menu-drawer__back-button{ background:transparent!important; border:none!important; box-shadow:none!important; color:var(--text)!important; }
html body .menu-drawer .menu-drawer__back-button:hover,html body .menu-drawer .menu-drawer__close-button:hover{ color:var(--accent)!important; }
html body .menu-drawer .menu-drawer__utility-links,html body .menu-drawer .drawer-localization__button{ color:var(--text-subtle)!important; background:transparent!important; }
html body .menu-drawer__backdrop{ backdrop-filter:brightness(0.45)!important; }

/* === 8. FACETS / FILTER POPOVERS (collection pages) ===================== */
floating-panel-component,.color-custom-popover,.facets__inputs,.facets__panel-content,
.sorting-filter__options,.facets__disclosure,.facets__display,.facets__panel{
  background:var(--surface-card)!important; color:var(--text)!important; border-color:var(--border)!important;
}
.facets,.facets *,.sorting-filter,.sorting-filter *,.facets__label,.facets__summary,.facets summary,
.checkbox__label-text,.sorting-filter__label,.active-facets *{ color:var(--text)!important; }
.facets a,.sorting-filter a,.active-facets a{ color:var(--accent)!important; }
.facets input,.facets__inputs input{ accent-color:var(--tce-teal)!important; }

/* === 9. PRODUCT PAGE CHROME ============================================= */
.variant-option__button,.variant-option__button--text,.variant-picker__option,
.product-form__input .select__select,.swatch-input__input + label{
  background:var(--surface-card)!important; color:var(--text)!important; border-color:var(--border-strong)!important;
}
.variant-option__button[aria-checked="true"],.variant-option__button.is-selected,.variant-option__button--selected{
  background:var(--tce-teal)!important; color:var(--tce-navy)!important; border-color:var(--tce-teal)!important;
}
.product__description :is(h2,h3,h4),.product-information :is(h2,h3,h4),.product__info :is(h2,h3,h4){ color:var(--heading)!important; }
.product__description h3,.product-information h3,.product__info h3{ color:var(--heading-alt)!important; }
.sticky-add-to-cart__bar,.sticky-add-to-cart__bar *,.sticky-add-to-cart__info *{ color:var(--text)!important; }
.sticky-add-to-cart__bar .price,.sticky-add-to-cart__bar .price *{ color:var(--accent)!important; }

/* === 10. .tce LANDING CORE SYSTEM ======================================= */
.tce{ font-family:var(--b); color:var(--text); line-height:1.65; background:var(--surface-page); }
.tce *,.tce *::before,.tce *::after{ box-sizing:border-box; }
.tce h2{ font-family:var(--h2); font-weight:700; color:var(--heading); margin:0 0 .4em; letter-spacing:.01em; line-height:1.05; }
.tce h3{ font-family:var(--h3); font-weight:900; color:var(--heading-alt); margin:0 0 .5em; letter-spacing:.04em; line-height:1.2; text-transform:uppercase; }
.tce h4{ font-family:var(--h4); font-weight:700; color:var(--heading); margin:0 0 .5em; letter-spacing:.04em; text-transform:uppercase; }
.tce h5,.tce h6{ font-family:var(--b); font-weight:700; color:var(--text); margin:0 0 .5em; }
.tce p{ margin:0 0 1em; font-size:17px; color:var(--text-muted); }
.tce li,.tce dd,.tce dt{ color:var(--text-muted); }
.tce em,.tce i,.tce blockquote{ font-family:var(--b); font-style:italic; font-weight:400; }
.tce img{ max-width:100%; height:auto; display:block; }
.tce a{ color:var(--accent); }
.tce .accent-rule{ display:block; width:64px; height:3px; background:var(--accent-2); margin:0 0 20px; border-radius:2px; }
.tce .accent-rule.center{ margin:0 auto 20px; }

/* ===== CANONICAL HERO (site-wide, every variant) ========================
   ONE source of truth for the hero on every page. Covers the BEM hero
   (.tce-hero__*), the section heroes (.sr-/.sch-/.lvm-hero-*), and the
   .tce .hero / splash. Goals: (a) the H1 is always Battery Park; (b) the
   pill + title always clear the transparent header by reserving the real
   header band on the hero container — so nothing overlaps the nav line and
   the buffer is identical on every page. */
.tce-hero,.sr-hero,.sch-hero,.lvm-hero,.tce .hero{
  align-items:center!important;                                   /* centre content in the band BELOW the header */
  padding-top:calc(var(--tce-header-overlay,0px) + clamp(28px,4vw,56px))!important;  /* 27 Sep 2026: the shared header (Vercel shell) sits in the page flow, above the hero — nothing to clear. Was calc(var(--header-height)+14px), an empty ~165px band on every hero. */
  box-sizing:border-box;
  /* Size by MIN-height, not a fixed height: a short hero fills the viewport and
     centres; a hero with a long (multi-line) title GROWS to fit it instead of
     overflowing the padded box upward into the nav. This is what keeps the
     title+pill always below the nav line on every page, whatever the content. */
  height:auto!important;
  min-height:100vh;
}
.tce-hero--compact{ min-height:80vh!important; }
.tce-hero--short,.sr-hero--compact{ min-height:62vh!important; }
/* 27 Sep 2026: on a tablet the viewport-high heroes ran ~950px (Cafés, FAQ) — capped so the page starts in the first screen */
@media (max-width:980px){ .tce-hero--compact{ min-height:min(80vh,600px)!important; } .tce-hero--short,.sr-hero--compact{ min-height:min(62vh,480px)!important; } }
/* inners: neutralise the old scattered per-page top buffers — the container
   now reserves the header band, so the inner adds none of its own. */
.tce-hero__inner,.tce-hero-inner,.sr-hero-inner,.sch-hero-inner,.lvm-hero-inner,.tce .hero .h-in{
  margin-top:0!important; margin-bottom:0!important; padding-top:0!important;
}
/* hero H1 = Battery Park on every hero variant */
.tce-hero__title,.tce-hero-title,.sr-hero-title,.sch-hero-title,.lvm-hero-title,
.tce .hero h1,.tce-hero h1,.tce-splash .tce-splash__title,[class$="hero-title"]{
  font-family:var(--tce-h1)!important; color:#fff!important; font-weight:400!important; letter-spacing:.03em!important;
  line-height:.92!important; font-size:clamp(48px,10vw,128px)!important; text-shadow:0 8px 40px rgba(0,0,0,.5)!important; margin:0 0 .18em!important;
}
.tce .hero{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; min-height:680px; overflow:hidden; background:#000; display:flex; align-items:flex-start; justify-content:center; }
.tce .hero > img.bg,.tce .hero > video,.tce .hero .tce-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; animation:tce-hero-zoom 22s ease-out infinite alternate; }
@keyframes tce-hero-zoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.tce .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,46,68,.32) 0%,rgba(26,46,68,.85) 100%); z-index:1; }
.tce .hero .h-in,.tce-hero .tce-hero__inner{ position:relative; z-index:2; max-width:1100px; padding:0 24px; text-align:center; color:#fff; margin:0 auto; padding-bottom:48px; }
.tce .hero .sub{ font-family:var(--b); font-style:italic; font-size:clamp(20px,2.6vw,32px); color:#fff; margin:18px auto 32px; line-height:1.4; max-width:820px; }
.tce .hero .eyebrow{ font-family:var(--b); font-weight:600; font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--tce-warm); margin-bottom:1em; }
.tce .hero .pill{ display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; padding:8px 22px; border-radius:999px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin-bottom:1.5em; }
.tce .hero .submark{ font-family:var(--b); font-weight:500; font-size:clamp(13px,1.5vw,16px); letter-spacing:.34em; text-transform:uppercase; color:var(--tce-teal-light); margin:0 0 26px; }
.tce .hero .ctas,.tce .hero .cta-row{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* Sections + bands (ALL dark now — surfaces driven by tokens) */
.tce .section{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding:120px 24px; overflow:hidden; background:var(--surface-page); }
.tce .section.tight{ padding:80px 24px; }
.tce .section .wrap{ max-width:1280px; margin:0 auto; }
.tce .section.narrow .wrap{ max-width:880px; }
.tce .section h2{ font-size:clamp(36px,5.8vw,72px); margin-bottom:18px; }
.tce .section .lead{ font-size:21px; color:var(--text-muted); max-width:720px; margin-bottom:28px; }
.tce .section .eyebrow,.tce .eyebrow{ font-family:var(--b); font-weight:700; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin:0 0 16px; }
.tce .bg-mist,.tce .section.bg-mist,.tce-bg-mist{ background:var(--surface-band)!important; color:var(--text)!important; }
.tce .bg-paper,.tce .section.bg-paper{ background:var(--surface-band)!important; color:var(--text)!important; }
.tce .bg-cream,.tce .section.bg-cream,.tce-bg-cream{ background:var(--surface-band)!important; color:var(--text)!important; }
.tce .bg-sky,.tce .section.bg-sky{ background:var(--tce-teal)!important; color:var(--on-accent)!important; }
.tce .bg-navy,.tce .section.bg-navy,.tce-bg-navy{ background:var(--surface-navy)!important; color:var(--text)!important; }
.tce .bg-accent,.tce .section.bg-accent{ background:var(--accent)!important; color:var(--on-accent)!important; }
.tce .bg-teal,.tce .section.bg-teal,.tce-bg-teal{ background:var(--tce-teal)!important; color:var(--on-accent)!important; }
/* heading/text colour per band */
.tce :is(.bg-mist,.bg-paper,.bg-cream) h2{ color:var(--heading)!important; }
.tce :is(.bg-mist,.bg-paper,.bg-cream) h3{ color:var(--heading-alt)!important; }
.tce :is(.bg-mist,.bg-paper,.bg-cream) :is(p,li,.lead){ color:var(--text-muted)!important; }
.tce .bg-navy h2,.tce .bg-navy h3,.tce .bg-navy h4{ color:var(--text)!important; }
.tce .bg-navy .eyebrow{ color:var(--accent-2)!important; }
.tce .bg-navy :is(p,.lead){ color:var(--text-muted)!important; }
.tce :is(.bg-teal,.bg-accent,.bg-sky) :is(h2,h3,h4,p,.lead,.eyebrow,li,strong,em,blockquote,cite){ color:var(--on-accent)!important; }  /* blockquote/cite added 27 Sep 2026: scripture was white on teal (fails AA) */
.tce :is(.bg-teal,.bg-accent,.bg-sky) .eyebrow{ opacity:.85; }
.tce :is(.bg-teal,.bg-accent) a:hover:not(.btn){ color:#000!important; }

/* Row / overlap image layouts */
.tce .row2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.tce .row2.flip{ direction:rtl; } .tce .row2.flip > *{ direction:ltr; }
.tce .overlap{ position:relative; padding:0 36px 36px 0; }
.tce .overlap .a{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; box-shadow:0 32px 72px rgba(0,0,0,.4); transition:transform .6s ease; }
.tce .overlap .b{ position:absolute; right:0; bottom:0; width:52%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; box-shadow:0 28px 60px rgba(0,0,0,.5); border:10px solid var(--surface-band); transition:transform .6s ease; }
.tce .overlap.flip{ padding:0 0 36px 36px; } .tce .overlap.flip .b{ right:auto; left:0; }
.tce .overlap:hover .a{ transform:scale(1.02) rotate(-.5deg); } .tce .overlap:hover .b{ transform:scale(1.04) rotate(1deg); }

/* Cards */
.tce .cards-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.tce .cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.tce .card{ background:var(--surface-card)!important; border-radius:14px; overflow:hidden; box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 0 1px var(--border); display:flex; flex-direction:column; transition:.4s ease; border-top:4px solid var(--accent); }
.tce .card:hover{ transform:translateY(-10px); box-shadow:0 32px 70px rgba(0,0,0,.6),0 0 0 1px var(--accent); }
.tce .card img{ width:100%; aspect-ratio:5/4; object-fit:cover; transition:.6s ease; max-height:300px; }
.tce .card:hover img{ transform:scale(1.05); }
.tce .card .b{ padding:32px; }
.tce .card h3{ font-size:22px; margin-bottom:8px; font-family:var(--h3); font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--heading-alt); }
.tce .card p{ font-size:15px; color:var(--text-muted); margin-bottom:14px; line-height:1.65; }
.tce .card .tag{ font-family:var(--b); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:block; }
.tce .card .quote{ font-style:italic; color:var(--text); font-size:16px; border-left:3px solid var(--accent-2); padding-left:14px; margin:14px 0 0; }
.tce .card .who{ display:flex; align-items:center; gap:12px; margin-top:18px; font-family:var(--b); font-weight:700; font-size:13px; color:var(--text); letter-spacing:.04em; }
.tce .card .who .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-2); }
.tce .card.teal,.tce-card.teal,.card-accent{ background:var(--tce-teal)!important; border-top-color:var(--tce-teal-dark); }
.tce .card.teal :is(h3,h4,p,span),.card-accent :is(h3,h4,p,span){ color:var(--on-accent)!important; }
.tce .card.teal .tag{ color:rgba(26,46,68,.8)!important; }
.tce .card.accent{ background:var(--surface-navy)!important; border-top-color:var(--accent-2); }
.tce .card.accent :is(h3,h4,p,span){ color:var(--text)!important; }
.tce .card.accent .tag{ color:var(--accent-2)!important; }

/* .tce buttons (body-scoped) — DELETED in v1.1.
   `.tce .btn`, `.tce .btn:hover`, `.tce .btn.gold/.navy/.teal/.ghost` all moved
   to assets/tce-button.css. They were the reason the button standard needed
   `!important` to win. DO NOT RE-ADD. */

/* Forms / scripture / dox / stats */
.tce .form{ background:var(--surface-card)!important; padding:48px; border-radius:14px; border:1px solid var(--border); border-left:6px solid var(--accent); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.tce .form label{ display:block; font-weight:700; font-size:12px; color:var(--text); margin:20px 0 8px; text-transform:uppercase; letter-spacing:.1em; }
.tce .form input,.tce .form select,.tce .form textarea{ width:100%; padding:14px 16px; border:1px solid var(--border-strong); border-radius:10px; font-family:var(--b); font-size:15px; background:rgba(255,255,255,.06); color:var(--text); }
.tce .form textarea{ min-height:140px; resize:vertical; }
.tce .form .check{ display:flex; align-items:flex-start; gap:12px; margin-top:18px; font-size:14px; color:var(--text-muted); font-weight:500; text-transform:none; letter-spacing:0; }
.tce .form .check input{ width:auto; margin-top:3px; }
.tce form h2,.tce form h3,.form h2,.form h3{ font-family:var(--h2)!important; font-size:clamp(28px,3.6vw,44px)!important; font-weight:700!important; color:var(--heading)!important; letter-spacing:.01em!important; line-height:1.1!important; margin-bottom:18px!important; }
.tce .scripture{ font-family:Georgia,serif; font-style:italic; font-size:clamp(22px,3vw,34px); color:var(--text); line-height:1.4; max-width:820px; margin:0 auto; text-align:center; }
.tce .scripture cite{ display:block; font-style:normal; font-family:var(--h); font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:20px; }
.tce .dox,.tce-dox{ text-align:center; font-family:Georgia,serif; font-style:italic; font-size:22px; color:var(--text); padding:56px 24px; background:var(--surface-band)!important; border-top:3px solid var(--accent); }
.tce .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.tce .stats .num,.tce .stats h2.num,.tce .stats h2{ font-family:var(--h)!important; font-size:clamp(48px,7vw,88px)!important; color:var(--accent)!important; line-height:1!important; margin:0 0 8px!important; letter-spacing:.02em!important; font-weight:900!important; text-transform:uppercase!important; }
.tce .stats .lbl{ font-family:var(--h); font-weight:600; font-size:13px; color:var(--text); text-transform:uppercase; letter-spacing:.12em; }
/* stats sitting on a teal band → navy */
.tce :is(.bg-teal,.bg-accent,.stats.full) .num,.tce :is(.bg-teal,.bg-accent,.stats.full) .lbl{ color:var(--on-accent)!important; }

/* Full-bleed waves */
.tce .tce-wave-top,.tce-wave-top{ display:block; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; height:60px; background:linear-gradient(to bottom,var(--tce-teal) 0%,var(--tce-teal) 30%,transparent 100%); }
.tce .tce-wave-bottom,.tce-wave-bottom{ display:block; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; height:60px; background:linear-gradient(to top,var(--surface-band) 0%,var(--surface-band) 30%,transparent 100%); }

/* Tablets keep pairs side by side and three cards three across; only phones stack
   (Matthew, 27 Sep 2026: on an iPad the stacked layout doubled every page's length). */
@media (max-width:980px){
  .tce .section{ padding:72px 20px; }
  .tce .cards-2{ gap:24px; }
  .tce .cards-3{ gap:18px; }
  .tce .hero{ min-height:560px; }
  .tce .row2,.tce .row2.flip{ gap:32px; }
  .tce .overlap,.tce .overlap.flip{ padding:0 24px 36px 0; } .tce .overlap.flip{ padding:0 0 36px 24px; }
  .tce .stats{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .tce .stats:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); gap:20px; }
  .tce .form{ padding:32px; }
}
@media (max-width:639px){
  .tce .cards-2,.tce .cards-3{ grid-template-columns:1fr; }
  .tce .row2,.tce .row2.flip{ grid-template-columns:1fr; gap:48px; } .tce .row2.flip{ direction:ltr; }
  .tce .overlap,.tce .overlap.flip{ padding:0 40px 50px 0; } .tce .overlap.flip{ padding:0 0 50px 40px; }
  .tce .stats:has(> :nth-child(3):last-child){ grid-template-columns:1fr; }
}
/* END · TCE Base · v1.1 · buttons live in tce-button.css · Soli Deo Gloria */