/* ------------------------------------------------
 * Scaltrix brand layer
 * Loaded after main.css. Holds the gold palette, logo sizing,
 * the brand panel (gold arrow) component, form states and countdown layout.
 * ------------------------------------------------ */

/* ------------------------------------------------*/
/* Palette Start */
/* ------------------------------------------------*/
/* Gold tones sampled from img/brand/logo-horizontal-gold.png.
 * Contrast on #0c0c0c: gold-500 10.9:1, gold-700 6.9:1 (both pass WCAG AA for body text).
 * gold-900 is 4.1:1, so it is only used for decoration, never for text. */
:root {
  --scx-bg: #0c0c0c;
  --scx-gold-900: #986b1f;
  --scx-gold-700: #c7902e;
  --scx-gold-500: #e1bf51;
  --scx-gold-300: #f7e27a;
  --scx-gold-line: rgba(225, 191, 81, 0.35);
  --scx-error: #ff8a80;
}

::-moz-selection {
  background-color: rgba(225, 191, 81, 0.85);
  color: #141414;
}

::selection {
  background-color: rgba(225, 191, 81, 0.85);
  color: #141414;
}

/* Visible keyboard focus everywhere (main.css removes the outline on buttons) */
a:focus-visible,
.btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--scx-gold-500) !important;
  outline-offset: 3px;
}
/* ------------------------------------------------*/
/* Palette End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Loader, Logo & Footer Brand Start */
/* ------------------------------------------------*/
.loader__logo {
  width: auto;
}

.loader__logo img {
  width: auto;
  height: 6rem;
}

/* Header: wordmark on phones, full logo with tagline from 768px */
.logo img {
  height: 3rem;
}

@media only screen and (min-width: 768px) {
  .logo img {
    height: 6rem;
  }
}

.footer-logo {
  display: block;
  width: auto;
  height: 2.6rem;
}

.footer-desktop .footer-logo {
  height: 2.8rem;
  margin-right: 3.4rem;
}

.footer-mobile__copyright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.footer-mobile__copyright .socials {
  margin: 0;
}

.copyright .js-year {
  font-weight: inherit;
  color: inherit;
}
/* ------------------------------------------------*/
/* Loader, Logo & Footer Brand End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Typography & Links Start */
/* ------------------------------------------------*/
.headline__subtitle {
  color: var(--scx-gold-500);
}

.block__subtitle {
  color: var(--scx-gold-700);
}

.text-link {
  background-image: linear-gradient(to right, var(--scx-gold-line), var(--scx-gold-line)), linear-gradient(to right, var(--scx-gold-500), var(--scx-gold-500));
}

.no-touch .text-link:hover {
  color: var(--scx-gold-500);
}

.contact-link {
  background-image: linear-gradient(to right, rgba(225, 191, 81, 0), rgba(225, 191, 81, 0)), linear-gradient(to right, var(--scx-gold-500), var(--scx-gold-500));
}

.no-touch .contact-link:hover {
  color: var(--scx-gold-500);
}

.navigation li a .link-hover,
.navigation li a.active-link .link-title,
.navigation li a.active-link .link-hover {
  color: var(--scx-gold-500);
}

.btn-s-text .hover,
.btn-s .hover {
  color: var(--scx-gold-500);
}

.menu-trigger .circle {
  border-color: var(--scx-gold-500);
}

.no-touch .popup-close:hover {
  color: var(--scx-gold-500);
}
/* ------------------------------------------------*/
/* Typography & Links End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Buttons Start */
/* ------------------------------------------------*/
.btn-light {
  border-color: var(--scx-gold-500);
  background-color: var(--scx-gold-500);
  color: #141414;
  -webkit-transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.no-touch .btn-light:hover {
  border-color: var(--scx-gold-300);
  background-color: var(--scx-gold-300);
}

.no-touch .btn-outline-light:hover {
  border-color: var(--scx-gold-500);
  color: var(--scx-gold-500);
}

.btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
/* ------------------------------------------------*/
/* Buttons End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Menu Background Start (replaces the template image with a gold glow line) */
/* ------------------------------------------------*/
.nav__background {
  background-image:
    linear-gradient(90deg, rgba(225, 191, 81, 0) 0%, rgba(225, 191, 81, 0.6) 50%, rgba(225, 191, 81, 0) 100%),
    radial-gradient(50% 100% at 50% 100%, rgba(199, 144, 46, 0.18) 0%, rgba(199, 144, 46, 0) 100%);
  -moz-background-size: 100% 1px, 100% 24rem;
       background-size: 100% 1px, 100% 24rem;
  background-position: bottom center, bottom center;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 1200px) {
  .nav__background {
    -moz-background-size: 100% 1px, 100% 30rem;
         background-size: 100% 1px, 100% 30rem;
  }
}
/* ------------------------------------------------*/
/* Menu Background End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Countdown Start */
/* ------------------------------------------------*/
.media__countdown {
  margin-top: 1rem;
}

.media__countdown #countdown {
  line-height: 1;
}

.media__countdown .countdown-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
}

.media__countdown .countdown-section {
  display: flex;
  flex-direction: column;
}

.media__countdown .countdown-amount {
  font-variant-numeric: tabular-nums;
}

.media__countdown .countdown-period {
  display: block;
  margin: 1.2rem 0 0 0;
  font: normal 600 1.2rem/1 "Poppins", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--scx-gold-500);
}

@media only screen and (min-width: 768px) {
  .media__countdown .countdown-row {
    gap: 2rem 4.4rem;
  }
  .media__countdown .countdown-period {
    margin-left: 0;
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 1400px) {
  .media__countdown .countdown-period {
    margin-left: 0;
  }
}

/* After the launch date: the title reads "Launching very soon" and the countdown is hidden */
.headline.is-launched .media__countdown {
  display: none;
}
/* ------------------------------------------------*/
/* Countdown End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Forms Start */
/* ------------------------------------------------*/
/* Honeypot field, hidden from people but still in the form for bots */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-light input:focus,
.form-light textarea:focus {
  border-bottom-color: var(--scx-gold-500);
}

.form-light input:user-invalid,
.form-light textarea:user-invalid {
  border-bottom-color: var(--scx-error);
}

/* Hidden form and reply groups must not catch clicks or focus */
.form {
  -webkit-transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
  transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
}

.form.is-hidden {
  visibility: hidden;
  -webkit-transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
  transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}

.reply-group {
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
  transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}

.reply-group.is-visible {
  visibility: visible;
  pointer-events: auto;
  -webkit-transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
  transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
}

.reply-ok .reply-group__icon {
  color: var(--scx-gold-500);
}

.reply-error .reply-group__icon {
  color: var(--scx-error);
}
/* ------------------------------------------------*/
/* Forms End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Services Icons & Contact Data Start */
/* ------------------------------------------------*/
.features__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 5rem;
          flex: 0 0 5rem;
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--scx-gold-line);
  -moz-border-radius: 50%;
       border-radius: 50%;
  font-size: 2rem;
  color: var(--scx-gold-500);
}

.contactdata__icon i,
.contactdata__socials li i {
  color: var(--scx-gold-500);
}
/* ------------------------------------------------*/
/* Services Icons & Contact Data End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Brand Panel Start */
/* ------------------------------------------------*/
/* One component for the right half of every screen.
 * .brand-panel__art holds the glow and the arrow SVG (shapes live in the shared <defs> at the top of index.html).
 * To show a reel instead, replace .brand-panel__art with <video class="brand-panel__video" ...>. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(90% 60% at 80% 18%, rgba(199, 144, 46, 0.1) 0%, rgba(199, 144, 46, 0) 70%),
    linear-gradient(165deg, #141414 0%, #0b0b0b 55%, #080808 100%);
}

.brand-panel__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.brand-panel__art {
  position: absolute;
  left: 8%;
  top: 14%;
  width: 84%;
  aspect-ratio: 10 / 7;
}

.brand-panel__arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Soft glow around the arrow head. Only opacity and transform animate, so it stays on the compositor. */
.brand-panel__glow {
  position: absolute;
  left: 52%;
  top: -24%;
  width: 64%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.brand-panel__glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-border-radius: 50%;
       border-radius: 50%;
  background: radial-gradient(closest-side, rgba(225, 191, 81, 0.26) 0%, rgba(199, 144, 46, 0.1) 55%, rgba(199, 144, 46, 0) 100%);
}

/* Home panel: draw in once (classes added by js/custom.js), then pulse slowly */
.brand-panel.will-draw .brand-panel__draw {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.brand-panel.will-draw .brand-panel__glow {
  opacity: 0;
}

.brand-panel.is-drawing .brand-panel__draw {
  -webkit-animation: scxDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
          animation: scxDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}

.brand-panel.is-drawing .brand-panel__draw--trail {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.brand-panel.is-drawing .brand-panel__glow {
  -webkit-animation: scxFadeIn 1.2s ease-out 1.5s forwards;
          animation: scxFadeIn 1.2s ease-out 1.5s forwards;
}

.brand-panel--hero .brand-panel__glow::before {
  will-change: opacity, transform;
  -webkit-animation: scxGlow 6s ease-in-out 2.7s infinite;
          animation: scxGlow 6s ease-in-out 2.7s infinite;
}

@-webkit-keyframes scxDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes scxDraw {
  to { stroke-dashoffset: 0; }
}

@-webkit-keyframes scxFadeIn {
  to { opacity: 1; }
}

@keyframes scxFadeIn {
  to { opacity: 1; }
}

@-webkit-keyframes scxGlow {
  0%, 100% { opacity: 0.65; -webkit-transform: scale(0.94); transform: scale(0.94); }
  50% { opacity: 1; -webkit-transform: scale(1.06); transform: scale(1.06); }
}

@keyframes scxGlow {
  0%, 100% { opacity: 0.65; -webkit-transform: scale(0.94); transform: scale(0.94); }
  50% { opacity: 1; -webkit-transform: scale(1.06); transform: scale(1.06); }
}

/* Inner panels: static arrow, placed differently on each screen */
.brand-panel--about .brand-panel__art {
  left: -28%;
  top: 18%;
  width: 124%;
}

.brand-panel--services .brand-panel__art {
  left: 14%;
  top: auto;
  bottom: 15%;
  width: 72%;
}

.brand-panel--contact .brand-panel__art {
  left: 22%;
  top: 12%;
  width: 70%;
}

.brand-panel--services .brand-panel__glow,
.brand-panel--contact .brand-panel__glow,
.brand-panel--about .brand-panel__glow {
  opacity: 0.8;
}

/* Services list at the bottom of the home panel */
.brand-panel__services {
  position: absolute;
  left: 3.4rem;
  right: 3.4rem;
  bottom: 3.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 2.4rem;
  margin: 0;
  padding: 2.4rem 0 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-panel__services li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font: normal 500 1.5rem/1.4 "Poppins", sans-serif;
  color: #ffffff;
}

.brand-panel__num {
  flex: 0 0 auto;
  min-width: 1.8rem;
  font: normal 600 1.2rem/1 "Poppins", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--scx-gold-500);
}

@media only screen and (min-width: 1200px) {
  .brand-panel__services {
    left: 6rem;
    right: 6rem;
    bottom: 12rem;
  }
}

@media only screen and (min-width: 1400px) {
  .brand-panel__services {
    left: 8rem;
    right: 8rem;
    bottom: 13rem;
  }
  .brand-panel__services li {
    font-size: 1.6rem;
  }
}

/* Inner panels are decorative, so they take less height on phones and tablets */
@media only screen and (max-width: 1199.98px) {
  .inner__media--brand {
    height: 56vh;
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-panel.will-draw .brand-panel__draw {
    stroke-dashoffset: 0;
  }
  .brand-panel.will-draw .brand-panel__glow {
    opacity: 1;
  }
  .brand-panel .brand-panel__draw,
  .brand-panel .brand-panel__glow,
  .brand-panel .brand-panel__glow::before {
    -webkit-animation: none !important;
            animation: none !important;
  }
}
/* ------------------------------------------------*/
/* Brand Panel End */
/* ------------------------------------------------*/