/* ==========================================================================
   The Cannon Group — enhancement layer
   Loaded last. Refines motion, depth and focus states on top of the
   original design system without altering its layout, type or palette.
   ========================================================================== */

:root {
  --tcg-blue: #1775b3;
  --tcg-blue-dark: #146398;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tailwind's .grid/.flex utilities outrank the [hidden] base rule; make
   the attribute authoritative so JS can collapse panels reliably. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; }

/* ---------- Accessibility: visible focus (original used outline:none) ---- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
select:focus-visible {
  outline: 2px solid var(--tcg-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible,
.contact-form .form-control:focus-visible {
  outline: none;
  border: 1px solid var(--tcg-blue) !important;
  box-shadow: 0 0 0 3px rgba(23, 117, 179, 0.16);
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--tcg-blue); color: #fff; padding: 10px 18px;
  border-radius: 0 0 6px 6px; font-family: Lexend, sans-serif; font-size: 14px;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ---------- Header: gains a soft shadow once the page scrolls ----------- */
.header {
  transition: box-shadow 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft);
  will-change: box-shadow;
}
.header.is-scrolled { box-shadow: 0 6px 28px -14px rgba(15, 34, 51, 0.28); }
.header .nav-p { transition: color 0.2s var(--ease-soft); }
.header .dropdownicon { transition: transform 0.28s var(--ease-out); }
#brands-trigger.is-open .dropdownicon { transform: rotate(180deg); }

/* Underline sweep on the desktop nav links */
.header .nav-p { position: relative; }
.header .nav-p::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--tcg-blue); transform: scaleX(0); transform-origin: right;
  transition: transform 0.32s var(--ease-out);
}
.header a:hover .nav-p::after,
.header .nav-p.active::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Mega dropdown --------------------------------------------- */
.mega-dropdown {
  /* Lives inside the fixed .header, so it travels with it on scroll. */
  top: 100%;
  z-index: 9;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.mega-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mega-dropdown[hidden] { display: block; }
.mega-dropdown .secondbutton img { transition: transform 0.25s var(--ease-out); }
.mega-dropdown a:hover .secondbutton img { transform: translateX(5px); }
.dropdownbg p { transition: color 0.2s var(--ease-soft); }
@media (max-width: 899px) { .mega-dropdown { display: none !important; } }

/* ---------- Mobile menu ------------------------------------------------ */
.drop-downmenu {
  /* The original relied on paint order alone (its `z-5` class is not a real
     Tailwind utility); an explicit z-index keeps the panel above page content
     but below the fixed mobile bar. */
  z-index: 9;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.drop-downmenu:not(.is-open) { opacity: 0; transform: translateY(-8px); }
.drop-downmenu.is-open { opacity: 1; transform: translateY(0); }
.drop-downmenu p { transition: color 0.2s var(--ease-soft), padding-left 0.2s var(--ease-out); }
.drop-downmenu a:hover p { color: var(--tcg-blue); padding-left: 4px; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ------------------------------------------------------- */
/* `position: relative` anchors the hero scrim. No `overflow: hidden` here --
   the brand cards are meant to hang past the hero's bottom edge. */
.home-hero, .page-hero { position: relative; }
/* A very slow drift keeps the still photograph feeling alive. */
.home-hero { background-position: 50% 50%; animation: tcg-drift 34s ease-in-out infinite alternate; }
@keyframes tcg-drift {
  from { background-position: 47% 50%; }
  to   { background-position: 53% 50%; }
}
/* Slight scrim so white headline type keeps contrast over the photo. */
.home-hero .hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(9, 26, 40, 0.26) 0%, rgba(9, 26, 40, 0.1) 40%, rgba(9, 26, 40, 0) 62%);
}
.home-hero > .container { position: relative; z-index: 1; }

.hero-enter { opacity: 0; transform: translateY(18px); animation: tcg-enter 0.7s var(--ease-out) forwards; animation-delay: var(--enter-delay, 60ms); }
@keyframes tcg-enter { to { opacity: 1; transform: none; } }
/* Settled by JS once the animation ends, so the headline can never be left
   invisible if the animation does not run at all. */
.hero-enter.is-entered { opacity: 1; transform: none; animation: none; }

/* ---------- Scroll reveal --------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(26px); }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"]  { transform: scale(0.975); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- Cards ------------------------------------------------------ */
/* Original transition was 1s on border only; this reads as unresponsive. */
.maincard {
  transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out), border-color 0.34s var(--ease-soft);
}
.maincard:hover {
  transform: translateY(-6px);
  border: 1px solid #cfd4d9;
  box-shadow: 0 22px 44px -26px rgba(15, 34, 51, 0.34);
  transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out), border-color 0.34s var(--ease-soft);
}
.maincardtwo {
  transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out), border-color 0.3s var(--ease-soft);
  border-radius: 7px;
}
.maincardtwo:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -28px rgba(15, 34, 51, 0.3);
}
.maincard img, .maincardtwo img { transition: transform 0.4s var(--ease-out); }
.maincard:hover img, .maincardtwo:hover img { transform: scale(1.04); }

.stat-card, .info-card {
  transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out);
}
.stat-card:hover, .info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -26px rgba(15, 34, 51, 0.34);
}

.section-first, .section-two, .reach-out {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.section-first:hover, .section-two:hover { transform: translateY(-4px); }

/* ---------- Buttons ---------------------------------------------------- */
.mainbtn, .mainbtncontact, .form-btn, .submit-btn, .success-btn {
  transition: background-color 0.25s var(--ease-soft), box-shadow 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}
.mainbtn:hover, .mainbtncontact:hover {
  background: var(--tcg-blue-dark);
  box-shadow: 0 14px 26px -14px rgba(23, 117, 179, 0.72);
}
.mainbtn:active, .mainbtncontact:active { transform: translateY(1px); }
.mainbtn button img, .secondbutton img, .brandbutton img { transition: transform 0.28s var(--ease-out), margin-left 0.28s var(--ease-out); }

/* The secondary "text + arrow" links get an underline sweep. */
.secondbutton h4 span, .brandbutton h4 span { position: relative; }
.secondbutton h4 span::after, .brandbutton h4 span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.32s var(--ease-out);
}
a:hover .secondbutton h4 span::after,
.secondbutton:hover h4 span::after,
a:hover .brandbutton h4 span::after,
.card-hover:hover .secondbutton h4 span::after,
.maincardtwo:hover .secondbutton h4 span::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Footer ----------------------------------------------------- */
.footer .footer-border p { transition: opacity 0.2s var(--ease-soft); }
.footer a:hover p { opacity: 0.86; }
.footer img { transition: transform 0.26s var(--ease-out); }
.footer a:hover img { transform: translateX(4px); }

/* ---------- Back-to-top ------------------------------------------------ */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 20;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--tcg-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -12px rgba(23, 117, 179, 0.8);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s, background-color 0.2s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--tcg-blue-dark); }

/* ---------- Brands page ------------------------------------------------ */
.brand-block { border-bottom: 1px solid #ececec; }
.brand-block:last-child { border-bottom: 0; }
.brand-block img { transition: transform 0.4s var(--ease-out); }
.brand-block:hover img { transform: translateY(-3px); }
.page-hero h1 { color: #131414; }

/* ---------- Team ------------------------------------------------------- */
.team-card { transition: transform 0.3s var(--ease-out); }
.team-card:hover { transform: translateY(-4px); }
.team-avatar {
  width: 84px; height: 84px; border-radius: 999px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Lexend Medium", Lexend, sans-serif; font-size: 26px; color: #fff;
  letter-spacing: 0.5px; box-shadow: 0 12px 24px -14px rgba(15, 34, 51, 0.5);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.team-card:hover .team-avatar { transform: scale(1.05); box-shadow: 0 16px 30px -14px rgba(15, 34, 51, 0.55); }
#team-slider .team-avatar { width: 120px; height: 120px; font-size: 36px; }
#team-slider .slick-slide { padding: 0 10px; }
#team-grid:empty::after, #team-slider:empty::after {
  content: ""; display: block; height: 120px;
}

/* ---------- Forms ------------------------------------------------------ */
.contact-form input,
.contact-form textarea,
.contact-form select {
  transition: border-color 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft), background-color 0.2s var(--ease-soft);
}
.field-error { color: #d3222a; font-family: "Lexend Light", Lexend, sans-serif; font-size: 13px; margin-top: 6px; min-height: 0; }
.field-error:empty { display: none; }
.is-invalid { border: 1px solid #d3222a !important; background: #fff7f7 !important; }

.radio-row { align-items: center; padding: 4px 0; cursor: pointer; font-family: "Lexend Light", Lexend, sans-serif; }
.radio-row input { accent-color: var(--tcg-blue); width: 16px; height: 16px; cursor: pointer; }
.same-as-shipping input { accent-color: var(--tcg-blue); width: 16px; height: 16px; cursor: pointer; }
.selectfield { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; cursor: pointer; }

/* Contact form send button: arrow tracks the label */
.mainbtncontact button img { transition: transform 0.3s var(--ease-out); }
.mainbtncontact:hover button img { transform: translateX(8px); }
.mainbtncontact.is-busy { opacity: 0.7; pointer-events: none; }

#contact-status:empty { display: none; }
#contact-status.ok { background: #eaf7ef; color: #1c7a45; font-family: "Lexend Light", Lexend, sans-serif; }
#contact-status.err { background: #fdeded; color: #b3262d; font-family: "Lexend Light", Lexend, sans-serif; }

/* ---------- Credit application ---------------------------------------- */
.applicationform { max-width: 1000px; }
.step { border-top: 1px solid #e6e6e6; padding-top: 8px; margin-top: 18px; }
.step:first-of-type { border-top: 0; margin-top: 0; }
.step-head { text-align: left; padding: 16px 0; cursor: pointer; }
.step-head .chev { transition: transform 0.3s var(--ease-out); }
.step-body { animation: tcg-panel 0.35s var(--ease-out); }
@keyframes tcg-panel { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.sub { transition: border-color 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-out); }
.sub-head { text-align: left; width: 100%; padding: 4px 0; }
.sub-head .sub-icon { transition: transform 0.3s var(--ease-out); }
.sub-body { animation: tcg-panel 0.32s var(--ease-out); }
.sub[data-open="true"] { box-shadow: 0 14px 34px -30px rgba(15, 34, 51, 0.55); }

.stepper { flex-wrap: wrap; }
.step-chip { align-items: center; cursor: pointer; padding: 6px 2px; transition: opacity 0.25s var(--ease-soft); }
.step-chip .chip-label { color: #c4c4c4; transition: color 0.25s var(--ease-soft); }
.step-chip.is-active .chip-label { color: #1794c4; }
.step-chip.is-done .chip-label { color: #1775b3; }
.step-chip .chip-icon { width: 20px; height: 20px; }

.btn-next { background: var(--tcg-blue); transition: background-color 0.25s var(--ease-soft), box-shadow 0.3s var(--ease-out); }
.btn-next:hover { background: var(--tcg-blue-dark); box-shadow: 0 14px 26px -14px rgba(23, 117, 179, 0.7); }
.btn-next img { transition: transform 0.28s var(--ease-out); }
.btn-next:hover img { transform: translateX(6px); }
.btn-next.is-locked { background: #9aa1a7; box-shadow: none; }
.btn-back { border: 1px solid #d4d4d4; color: #363737; font-family: "Lexend Light", Lexend, sans-serif; transition: border-color 0.2s, background-color 0.2s; }
.btn-back:hover { border-color: #9aa1a7; background: #f6f6f6; }
.submit-app img { transition: transform 0.28s var(--ease-out); }
.submit-app:hover img { transform: translateX(6px); }
.ref-title { border-left: 3px solid var(--tcg-blue); padding-left: 12px; }

.result-panel { border: 2px solid #dcdcdc; border-radius: 8px; padding: 24px; margin: 12px 0 40px; animation: tcg-panel 0.4s var(--ease-out); }
.result-panel img { width: 130px; height: auto; }

/* Phone input country list */
.react-tel-input .country-list { display: block; max-height: 220px; overflow-y: auto; }
.react-tel-input .country-list[hidden] { display: none; }
.react-tel-input .flag-dropdown { transition: background-color 0.2s var(--ease-soft); }

/* ---------- Motion preferences ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], .hero-enter { opacity: 1 !important; transform: none !important; }
  .home-hero { animation: none; }
}

/* ---------- Team carousel (mobile) ------------------------------------- */
.team-carousel { position: relative; overflow: hidden; padding-bottom: 44px; }
.team-track { display: flex; transition: transform 0.55s var(--ease-out); }
.team-slide { flex: 0 0 100%; padding: 0 10px; box-sizing: border-box; }
.team-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; }
.team-dots button {
  width: 8px; height: 8px; border-radius: 999px; background: #cfd4d9; padding: 0;
  transition: background-color 0.25s var(--ease-soft), width 0.25s var(--ease-out);
}
.team-dots button.is-active { background: var(--tcg-blue); width: 22px; }

/* ---------- Headings ----------------------------------------------------
   The closing CTA is a call to action, not the page's subject, so it is an
   <h2>. These rules mirror the h1 type scale exactly so it looks unchanged.
   ------------------------------------------------------------------------ */
.eyebrow { font-size: 18px; }   /* section kicker: matches the h4 it replaces */
.cta-title { font-size: 60px; font-family: "Lexend Medium", Lexend, sans-serif; }
@media (max-width: 1024px) { .cta-title { font-size: 48px; } }
@media (max-width: 767px)  { .cta-title { font-size: 36px; } }

/* ---------- Icon sizing --------------------------------------------------
   width/height attributes carry each file's true aspect ratio (so the browser
   reserves the right box before decode). Where the original stylesheet does
   not size an icon, CSS has to, or the attribute would become the display
   size and the icon would render at its full natural pixels.
   ------------------------------------------------------------------------ */
.footer img { width: 30px; height: 30px; }
.sub-head .sub-icon { width: 24px; height: 24px; }
.step-head .chev { width: 30px; height: 30px; }
.btn-next img, .submit-app img { width: 30px; height: auto; }
.mobile-bg button img { width: 35px; height: 15px; }
.result-panel img { width: 130px; height: auto; }

/* ---------- Utilities not present in the prebuilt Tailwind bundle -------
   The original site ships a purged Tailwind build, so the handful of
   utilities introduced by this replica are declared here with the same
   values Tailwind would emit.
   ---------------------------------------------------------------------- */
.flex-1 { flex: 1 1 0%; }
.h-28 { height: 7rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.pt-44 { padding-top: 11rem; }
.pb-32 { padding-bottom: 8rem; }
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .lg\:pb-12 { padding-bottom: 3rem; }
}