/* =====================================================================
   Timmacy Growth Labs: LIGHT THEME (2026-10-16)
   Loaded last on every page, after brand.css. The owner asked for white sections and clean,
   medium-weight type. Brand colours are unchanged: Timmacy teal on white, dark accents. (A "more colour"
   pass with blue, violet and coral was tried the same day and taken out again at the owner's request.)
   The photo heroes stay dark (owner's call); every band below them that was dark ("Our work", flow,
   trust, world, subscribe, footer, the sticky header, 404) is light.
   Approach: inside those bands the dark-theme tokens (--tgl-chalk, --tgl-ash, --tgl-panel,
   --tgl-dark-line) are re-pointed at light values, so brand.css rules flip on their own; the rest
   is overridden below. Its own file because /assets/* is cached for 7 days. To go back to the dark
   look, remove the <link> to this file. Pre-light copies of every page: _build/backups/2026-10-16-before-light/.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400..800&display=swap");

:root {
  --tgl-muted: #5F5F5F;   /* a little darker than #6E6E6E so body text reads cleanly on white */
  --heading-one: clamp(2.5rem, 1.3rem + 4vw, 5.25rem);
  --heading-two: clamp(1.95rem, 1.2rem + 2.3vw, 3.3rem);
}

/* ---- type: medium weights, calm tracking, clean reading sizes */
body { color: var(--tgl-muted); font-size: 1.0625rem; line-height: 1.7; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--tgl-ink); font-weight: 650; letter-spacing: -0.018em; }
h1, .h1 { font-weight: 700; letter-spacing: -0.032em; line-height: 1.05; }
h2, .h2 { font-weight: 700; letter-spacing: -0.026em; line-height: 1.1; }
.tgl-hero-title { font-weight: 700; }
.tgl-bgword { font-weight: 700; }
p { line-height: 1.7; }

/* ---- the heroes keep their photo (the owner's call, 2026-10-16): dark photo, white type, as before.
   The title bands on projects.html and stores-we-admire.html get the same photo so every page opens alike. */
html .breadcrumb {
  background:
    linear-gradient(rgba(13, 13, 16, 0.72), rgba(13, 13, 16, 0.9)),
    var(--tgl-carbon) url("../images/thumbs/hero-bg.jpg") center 30% / cover no-repeat !important;
}

/* ---- the bands below the hero that used to be dark */
:is(section.bg-black:not(.banner-one):not(.tgl-page-hero), .tgl-flow-band, .tgl-trust-band, .tgl-world, .tgl-subscribe, .footer) {
  --tgl-chalk: #1C1C1C;
  --tgl-ash: #5F5F5F;
  --tgl-panel: #FFFFFF;
  --tgl-panel-2: #F7F7F7;
  --tgl-dark-line: #E7E7E7;
  color: var(--tgl-ash);
}
html section.bg-black:not(.banner-one):not(.tgl-page-hero) { background: #FFFFFF !important; }
html .tgl-flow-band, html .tgl-trust-band, html .tgl-world, html .tgl-subscribe { background: var(--tgl-paper-2) !important; }
html .tgl-work-band { border-top: 1px solid var(--tgl-line); border-bottom: 1px solid var(--tgl-line); }
html .footer, html .footer.bg-black { background: var(--tgl-paper-2) !important; border-top: 1px solid var(--tgl-line); }
.tgl-trust-band::before, .tgl-access::before, .tgl-world::before, .tgl-flow-band::before { display: none; }

/* white text in those bands becomes ink, except on buttons and on the dark panels */
:is(section.bg-black:not(.banner-one):not(.tgl-page-hero), .tgl-flow-band, .tgl-trust-band, .tgl-world, .tgl-subscribe, .footer, .header.fixed-header)
  .text-white:not(.btn):not(.btn *):not(.bg-main-600 *):not(.tgl-plan--featured *):not(.tgl-vcard *):not(.tgl-access *):not(.tgl-flip__back *) { color: var(--tgl-ink) !important; }
.footer .text-white, .footer .text-heading { color: var(--tgl-ink) !important; }
.tgl-trust-band h2, .tgl-trust-kit__head h3 { color: var(--tgl-ink); }
section.bg-black:not(.banner-one):not(.tgl-page-hero) .section-heading > span { background: var(--tgl-tint) !important; color: var(--tgl-klein-deep) !important; }
section.bg-black:not(.banner-one):not(.tgl-page-hero) .tgl-bgword { -webkit-text-stroke-color: rgba(28, 28, 28, 0.07); }
section.bg-black:not(.banner-one):not(.tgl-page-hero) .tgl-hl { color: var(--tgl-klein-deep); }
section.bg-black:not(.banner-one):not(.tgl-page-hero) .bg-white.tw-rounded-xl { box-shadow: 0 18px 44px rgba(13, 13, 16, 0.08) !important; }
.tgl-work-band .swiper-pagination-bullet { background: rgba(28, 28, 28, 0.2); }
.tgl-work-band .btn.tgl-btn-outline { color: var(--tgl-ink) !important; border-color: rgba(28, 28, 28, 0.35) !important; }
.tgl-work-band .btn.tgl-btn-outline:hover { color: var(--tgl-klein-deep) !important; border-color: var(--tgl-klein) !important; background: var(--tgl-tint) !important; }

/* the trust band's flip-card backs stay dark, so they keep the dark-theme tokens */
.tgl-flip__back { --tgl-chalk: #F0EDE8; --tgl-ash: #9A9A9A; --tgl-panel: #16161D; --tgl-panel-2: #1C1C24; --tgl-dark-line: #2A2A33; }

/* ---- header: white type over the photo hero (as before); frosted white with ink once it sticks,
   and from the top on the one page that starts light (404) */
:is(.header.fixed-header, body:has(.error-section) .header) .tgl-lockup { color: var(--tgl-ink); }
:is(.header.fixed-header, body:has(.error-section) .header).menuColorWhite .nav-menu__link { color: #444444; font-weight: 500; }
:is(.header.fixed-header, body:has(.error-section) .header).menuColorWhite .nav-menu__link:hover,
:is(.header.fixed-header, body:has(.error-section) .header).menuColorWhite .nav-menu__item:hover > .nav-menu__link { color: var(--tgl-ink); }
:is(.header.fixed-header, body:has(.error-section) .header).menuColorWhite .nav-menu__item.activePage > a { color: var(--tgl-klein-deep) !important; }
:is(.header.fixed-header, body:has(.error-section) .header) .toggle-mobileMenu { color: var(--tgl-ink) !important; }
html .header.fixed-header, html .fixedHeaderBlack.fixed-header { background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.08); border-bottom: 1px solid var(--tgl-line); }
@media (max-width: 991.98px) { html .header.fixed-header { background: rgba(255, 255, 255, 0.97); } }

/* ---- flow, trust, world and subscribe bands on their light ground */
.tgl-flow__icon:not(.tgl-flow__icon--end) { background: #FFFFFF; border-color: var(--tgl-line); color: var(--tgl-klein-deep); box-shadow: 0 14px 30px rgba(13, 13, 16, 0.08); }
.tgl-flip__front { border-color: var(--tgl-line); box-shadow: 0 18px 44px rgba(13, 13, 16, 0.10); }
.tgl-trust-kit { background: #FFFFFF; border-color: var(--tgl-line); box-shadow: 0 14px 34px rgba(13, 13, 16, 0.06); }
.tgl-trust-kit li { background: var(--tgl-paper-2); border-color: var(--tgl-line); color: var(--tgl-ink); }
.tgl-trust-kit li i { color: var(--tgl-klein-deep); }
.tgl-world__map::before { filter: brightness(0); opacity: 0.16; }
.tgl-world__pin b { text-shadow: none; color: var(--tgl-ink); }
.tgl-world .tgl-pill--dark, .tgl-subscribe .tgl-pill--dark { background: var(--tgl-tint) !important; color: var(--tgl-klein-deep) !important; }
.tgl-stats--dark > div { background: rgba(255, 255, 255, 0.92); border-color: var(--tgl-line); box-shadow: 0 20px 50px rgba(13, 13, 16, 0.08); }

/* ---- footer on its light ground */
.footer .tgl-lockup { color: var(--tgl-ink); }
.footer a { color: #4E4B4B; }
.footer a:hover { color: var(--tgl-klein-deep); }
.footer a[href^="mailto:"], .footer a[href*="wa.me"], .footer a[href^="tel:"] { color: var(--tgl-ink) !important; font-size: 1.1rem !important; font-weight: 700; }
.footer a[href^="mailto:"] { font-size: 1rem !important; }
.footer a[href^="mailto:"]:hover, .footer a[href*="wa.me"]:hover, .footer a[href^="tel:"]:hover { color: var(--tgl-klein-deep) !important; }
.footer .animation-item h2.h5 { color: var(--tgl-klein-deep) !important; }
.footer .bg-yellow-950 { background: #FFFFFF !important; border: 1px solid var(--tgl-line); color: var(--tgl-ink) !important; }
.footer .line-y-axies { background-color: var(--tgl-line) !important; }
.footer input:not([type="checkbox"]) { background-color: #FFFFFF !important; color: var(--tgl-ink) !important; border-color: var(--tgl-line-2) !important; }
.tgl-footer-marks span { border-color: var(--tgl-line-2); color: var(--tgl-ink); background: #FFFFFF; }
.tgl-footer-marks img { filter: brightness(0) invert(0.1); }

/* ---- the live store showcase sits on white: a softer shadow */
.tgl-ls { box-shadow: 0 20px 50px rgba(13, 13, 16, 0.07); }

/* ---- big contact buttons on light sections: white pills (the ones in the photo hero stay dark) */
.tgl-contact-big--light a { background: #FFFFFF; border-color: var(--tgl-line-2); color: var(--tgl-ink); box-shadow: 0 14px 34px rgba(13, 13, 16, 0.08); }
.tgl-contact-big--light a:hover { color: var(--tgl-klein-deep); }
.tgl-contact-big--light i { color: var(--tgl-klein-deep); }

/* ---- 404 page: white with one soft teal glow */
html .error-section { background: radial-gradient(45% 55% at 12% 10%, rgba(51, 203, 191, 0.16), transparent 70%), #FFFFFF !important; }
.error-section h1 { color: var(--tgl-ink) !important; }
.error-section p { color: var(--tgl-muted) !important; }
.error-section img { filter: invert(1) brightness(0.4); }
.error-section input { border: 1px solid var(--tgl-line-2) !important; }

/* ---- speed (2026-10-16, owner: "make the animation load fast")
   The preloader used to wait for every image on the page; now it clears after at most a second.
   Scroll reveals (AOS) run in 0.45s with no stagger delay and a short 24px slide instead of 100px. */
.loader-mask { animation: tgl-loader-out 0.3s ease 0.9s forwards; }
@keyframes tgl-loader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
[data-aos][data-aos] { transition-duration: 0.45s !important; transition-delay: 0s !important; }
html [data-aos="fade-up"]:not(.aos-animate) { transform: translate3d(0, 24px, 0); }
html [data-aos="fade-down"]:not(.aos-animate) { transform: translate3d(0, -24px, 0); }
html [data-aos="fade-right"]:not(.aos-animate) { transform: translate3d(-24px, 0, 0); }
html [data-aos="fade-left"]:not(.aos-animate) { transform: translate3d(24px, 0, 0); }
.tgl-word { animation-duration: 0.55s; animation-delay: calc(0.1s + var(--i, 0) * 0.05s); }
.tgl-card__list li { animation-delay: calc(0.4s + var(--i, 0) * 0.08s); }

/* ---- language button (EN) in the white sticky header and on the 404 page: ink text, light outline */
:is(.header.fixed-header, body:has(.error-section) .header) .tgl-lang__btn { color: var(--tgl-ink); background: #FFFFFF; border-color: var(--tgl-line-2); }
:is(.header.fixed-header, body:has(.error-section) .header) .tgl-lang__btn:hover,
:is(.header.fixed-header, body:has(.error-section) .header) .tgl-lang.is-open .tgl-lang__btn { color: var(--tgl-klein-deep); background: var(--tgl-tint); border-color: var(--tgl-klein); }
:is(.header.fixed-header, body:has(.error-section) .header) .tgl-lang__btn > i:first-child { color: var(--tgl-klein-deep); }