
:root{
  --iron-black:#0b0b0b;
  --panel:#111111;
  --gold:#C89B3C;
  --gold-light:#E4B64F;
  --steel:#E8E8E8;
  --muted:#c9c9c9;
  --line:rgba(200,155,60,.75);
}
@keyframes scaleInOutward{
  from{
    opacity:0;
    transform:scale(0.6);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}
@keyframes scaleInOutwardSubline{
  from{
    opacity:0;
    transform:scale(0.8);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--iron-black);
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
}
a{color:inherit}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Initial skeleton screen: mirrors the page structure while slow assets load. */
.page-skeleton{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden auto;
  background:
    radial-gradient(circle at 50% 8%, rgba(200,155,60,.12), transparent 30%),
    #080808;
  opacity:1;
  visibility:visible;
  transition:opacity .45s ease, visibility .45s ease;
}
.is-loading .page-skeleton{display:block}
.is-ready .page-skeleton{opacity:0;visibility:hidden;pointer-events:none}
.skeleton-shell{width:100%;min-height:100dvh;padding:20px clamp(20px,4vw,72px) 50px}
.skeleton-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.skeleton-brand{display:flex;align-items:center;gap:26px}
.skeleton-shape{
  display:block;
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.035);
}
.skeleton-shape::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-110%);
  background:linear-gradient(100deg, transparent 20%, rgba(200,155,60,.2) 48%, rgba(255,255,255,.12) 52%, transparent 80%);
  animation:skeletonShimmer 1.65s ease-in-out infinite;
}
@keyframes skeletonShimmer{to{transform:translateX(110%)}}
.skeleton-logo{width:clamp(110px,13vw,150px);height:124px;clip-path:polygon(50% 0,94% 14%,86% 73%,50% 100%,14% 73%,6% 14%)}
.skeleton-wordmark{width:clamp(220px,34vw,360px);height:58px;border-radius:8px}
.skeleton-social{padding-top:18px}
.skeleton-social-label{width:88px;height:14px;border-radius:99px;margin:auto}
.skeleton-social-icons{display:flex;gap:14px;margin-top:16px}
.skeleton-social-icons .skeleton-shape{width:42px;height:42px;border-radius:50%}
.skeleton-hero{text-align:center;padding-top:26px}
.skeleton-heading{width:min(720px,72vw);height:clamp(58px,9vw,104px);margin:auto;border-radius:10px}
.skeleton-rule{width:min(720px,80%);height:2px;margin:30px auto 28px;background:rgba(200,155,60,.25)}
.skeleton-copy{width:min(580px,68vw);height:52px;margin:auto;border-radius:8px}
.skeleton-features{display:grid;grid-template-columns:repeat(4,1fr);max-width:890px;margin:42px auto}
.skeleton-feature{display:grid;justify-items:center;gap:14px;padding:0 22px;border-right:1px solid rgba(255,255,255,.12)}
.skeleton-feature:last-child{border-right:0}
.skeleton-feature i{width:52px;height:52px;border-radius:50%}
.skeleton-feature b{width:110px;height:38px;border-radius:7px}
.skeleton-panel{width:calc(100% + (2 * clamp(20px,4vw,72px)));margin-left:calc(-1 * clamp(20px,4vw,72px));padding:50px clamp(20px,4vw,72px);background:rgba(255,255,255,.025)}
.skeleton-cta,.skeleton-form{max-width:980px;margin:0 auto 28px;padding:34px clamp(24px,4vw,58px);border:1px solid rgba(200,155,60,.18);background:rgba(255,255,255,.025);border-radius:5px}
.skeleton-cta{display:grid;grid-template-columns:1fr 1fr;gap:46px}
.skeleton-cta .skeleton-shape{height:88px;border-radius:8px}
.skeleton-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.skeleton-form .skeleton-shape{height:54px;border-radius:12px}

.page{
  min-height:100dvh;
  display:flex;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 10%, rgba(200,155,60,.12), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.05), #050505 92%);
}
.poster{
  width:100%;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      rgba(0,0,0,.45),
      rgba(0,0,0,.75)
    );
  background-color:#080808;
  box-shadow:0 0 60px rgba(0,0,0,.8);
}

.section-bg-panel{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  padding:50px clamp(20px,4vw,72px) 72px;
  background-image:url("assets/irongate-coming-soon-hero.jpg");
  background-image:image-set(
    url("assets/irongate-coming-soon-hero.webp") type("image/webp"),
    url("assets/irongate-coming-soon-hero.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.section-bg-panel .cta,
.section-bg-panel .contact-form-section{
  position:relative;
  z-index:1;
}

/* Dark overlay with a soft fade at the top to avoid sharp contrast */
.section-bg-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.94) 0%,
    rgba(0,0,0,0.86) 10%,
    rgba(0,0,0,0.72) 28%,
    rgba(0,0,0,0.50) 50%,
    rgba(0,0,0,0.12) 82%
  );
  opacity:0;
  animation:overlayFade 700ms ease-out forwards;
}

@keyframes overlayFade{
  from{opacity:0}
  to{opacity:1}
}

/* Soft bottom fade to blend background into footer */
.section-bg-panel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:28%;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.6) 30%,
    rgba(0,0,0,0.86) 65%,
    rgba(0,0,0,1) 100%
  );
  opacity:0;
  animation:overlayFade 900ms ease-out forwards;
}

.poster::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 30%, transparent 70%, rgba(0,0,0,.55));
}
.content{
  position:relative;
  z-index:2;
  padding:20px clamp(20px,4vw,72px) 30px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
}
.brand{
  display:flex;
  align-items:center;
  gap:26px;
}
.brand-link{
  display:inline-flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.brand-link:hover,
.brand-link:focus{
  cursor:pointer;
}
.shield{
  display:block;
  width:clamp(110px,13vw,150px);
  max-width:150px;
  height:auto;
  filter:drop-shadow(0 12px 20px #000);
}
.wordmark-main{
  display:block;
  width:clamp(220px,34vw,360px);
  max-width:100%;
  height:auto;
  position:relative;
}
.social{
  color:var(--gold-light);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.07em;
  text-align:center;
  padding-top:18px;
}
.social-icons{
  display:flex;
  gap:14px;
  justify-content:center;
  margin-top:16px;
}
.social-icons span{
  width:42px;height:42px;
  border:2px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:19px;
  transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease, border-color .15s ease;
  will-change:transform;
}
.social-icons span:hover,
.social-icons span:focus{
  cursor:pointer;
  transform:translateY(-6px) scale(1.06) skewX(-6deg);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  border-color:var(--gold-light);
}
.social-icons span:active{
  transform:translateY(-2px) scale(1.02) skewX(-3deg);
}
.social-icons span:focus{outline:3px solid rgba(200,155,60,.18);outline-offset:4px}
.hero{
  text-align:center;
  padding-top:10px;
}
.coming{
  margin:0;
  font-family:Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-size:clamp(54px,10vw,112px);
  line-height:.95;
  letter-spacing:.08em;
  color:#e7e7e7;
  text-shadow:0 4px 0 #747474, 0 14px 30px rgba(0,0,0,.95);
  animation:scaleInOutward 0.8s ease-out;
  position:relative;
}
.coming::before{
  content:"";
  position:absolute;
  top:-20%;
  left:0;
  right:0;
  bottom:-20%;
  background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 70%);
  background-size:200% 100%;
  background-position:0% 0%;
  animation:glintRightToLeft 5.5s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:overlay;
}
@keyframes glintLeftToRight{
  0%{background-position:-100% 0;}
  36.3636%{background-position:200% 0;} /* 2s of 5.5s */
  72.7272%{background-position:-100% 0;} /* 4s of 5.5s */
  100%{background-position:-100% 0;} /* pause */
}
@keyframes glintRightToLeft{
  0%{background-position:200% 0;}
  36.3636%{background-position:-100% 0;} /* 2s */
  72.7272%{background-position:200% 0;} /* 4s */
  100%{background-position:200% 0;} /* pause */
}
.gold-rule{
  width:min(720px,80%);
  height:2px;
  margin:30px auto 28px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
}
.subline{
  margin:0;
  font-size:clamp(18px,2.2vw,28px);
  letter-spacing:.14em;
  color:#f2f2f2;
  text-transform:uppercase;
  font-weight:800;
  text-shadow:0 3px 15px #000;
  animation:scaleInOutwardSubline 0.8s ease-out 0.2s both;
}
.subline strong{
  display:block;
  color:var(--gold-light);
  margin-top:12px;
  letter-spacing:.19em;
}
.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:42px auto 42px;
  max-width:890px;
}
.feature{
  text-align:center;
  padding:0 22px;
  border-right:1px solid rgba(255,255,255,.42);
}
.feature:last-child{border-right:none}
.icon{
  color:var(--gold);
  margin:0 auto 12px;
  width:52px;height:52px;
  display:inline-block;
  transform-origin:center center;
}
.features .feature:nth-child(1) .icon{
  animation:flipSideways 3s ease-in-out infinite 0s;
}
.features .feature:nth-child(2) .icon{
  animation:rotateGear 3s ease-in-out infinite 0s;
}
.features .feature:nth-child(3) .icon{
  animation:scaleInOutwardIcon 3s ease-in-out infinite 0s;
}
.features .feature:nth-child(4) .icon path.outline,
.features .feature:nth-child(4) .icon path.checkmark{
  stroke:currentColor;
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:checkmarkPath 3s ease-in-out infinite 0s;
}
@keyframes flipSideways{
  0%{
    transform:perspective(400px) rotateY(0deg);
    opacity:1;
  }
  66.666%{
    transform:perspective(400px) rotateY(180deg);
    opacity:1;
  }
  100%{
    transform:perspective(400px) rotateY(180deg);
    opacity:1;
  }
}
@keyframes rotateGear{
  0%{transform:rotate(0deg);}
  66.666%{transform:rotate(360deg);}
  100%{transform:rotate(360deg);}
}
@keyframes scaleInOutwardIcon{
  0%{opacity:0;transform:scale(0.6);}
  66.666%{opacity:1;transform:scale(1);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes checkmarkPath{
  0%{stroke-dashoffset:100;opacity:0;}
  66.666%{stroke-dashoffset:0;opacity:1;}
  100%{stroke-dashoffset:0;opacity:1;}
}
.feature-title{
  margin:0;
  font-size:clamp(16px,1.8vw,22px);
  line-height:1.25;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 3px 12px #000;
}
.cta{
  margin:0 auto 46px;
  max-width:980px;
  border:2px solid var(--line);
  border-radius:5px;
  background:rgba(5,5,5,.62);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  padding:34px clamp(24px,4vw,58px);
  backdrop-filter:blur(2px);
}
.cta-title{
  text-align:left;
  font-family:Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-size:clamp(30px,4vw,50px);
  letter-spacing:.04em;
  line-height:1.15;
  margin:0;
}
.cta-title span{
  display:block;
  color:var(--gold-light);
}
.cta-contact{
  border-left:1px solid rgba(255,255,255,.42);
  padding-left:46px;
  text-align:left;
}
.get-in-touch{position:relative; height:54px; overflow:visible}
.git{margin:0; font-size:clamp(18px,2.3vw,28px); font-family:inherit; font-weight:900; letter-spacing:.04em}
.git.static{position:relative; z-index:4}
.git.anim{position:absolute; left:0; top:0; width:100%; z-index:5; pointer-events:none}
.git.anim.a1{animation:gitFall 6s cubic-bezier(.2,.8,.2,1) infinite 0s}
.git.anim.a2{animation:gitFall 6s cubic-bezier(.2,.8,.2,1) infinite 3s}

@keyframes gitFall{
  0%{transform:translateY(0) scale(1); opacity:1; filter:blur(0px)}
  60%{transform:translateY(48px) scale(.96); opacity:.18; filter:blur(1px)}
  100%{transform:translateY(48px) scale(.96); opacity:0; filter:blur(2px)}
}
.cta-contact h2{
  color:var(--gold-light);
  text-transform:uppercase;
  margin:0 0 10px;
  font-size:clamp(21px,2.3vw,29px);
  letter-spacing:.04em;
}
.cta-contact p{
  margin:0;
  color:#f0f0f0;
  line-height:1.55;
  font-size:18px;
}
.contact-form-section{
  margin:0 auto 46px;
  max-width:980px;
  padding:34px clamp(24px,4vw,58px);
  border:2px solid rgba(255,255,255,.18);
  border-radius:5px;
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(4px);
}
.contact-form{
  display:grid;
  gap:18px;
}
.form-honeypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.contact-form[aria-busy="true"]{
  cursor:progress;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.form-grid > label{
  width:100%;
  box-sizing:border-box;
  min-width:0;
}
.equipment-field{
  grid-column:1 / -1;
}
.equipment-custom-hint{
  align-self:flex-start;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.01em;
}
.equipment-custom-hint[hidden]{
  display:none;
}
.equipment-custom-hint kbd{
  display:inline-block;
  padding:1px 6px;
  border:1px solid rgba(255,255,255,.28);
  border-bottom-color:rgba(255,255,255,.42);
  border-radius:4px;
  background:rgba(255,255,255,.09);
  color:#fff;
  font:600 11px/1.5 inherit;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  color:#f7f7f7;
  font-size:clamp(14px,1.1vw,16px);
  font-weight:700;
  letter-spacing:.02em;
}
.contact-form input,
.contact-form select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
  min-height:54px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fff;
  padding:14px 16px;
  font:inherit;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact-form input::placeholder{
  color:rgba(255,255,255,.45);
}
.contact-form select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:8px 8px, 8px 8px;
  background-repeat:no-repeat;
  padding-right:38px;
  color:#fff;
}
.contact-form select[multiple] {
  padding-right:16px;
}
.contact-form input:focus,
.contact-form select:focus{
  outline:none;
  border-color:var(--gold-light);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(200,155,60,.12);
}
.contact-form select option{
  background:#111;
  color:#fff;
}

/* ============================================================
   Number stepper (Rental Duration)
   ============================================================ */
.stepper{
  display:flex;
  align-items:stretch;
  width:100%;
  min-width:0;
  min-height:54px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.stepper:focus-within{
  border-color:var(--gold-light);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(200,155,60,.12);
}
.stepper-input{
  -moz-appearance:textfield;
  appearance:textfield;
  flex:1 1 auto;
  min-width:0;
  width:100%;
  background:transparent;
  border:none;
  color:#fff;
  text-align:center;
  padding:14px 6px;
  font:inherit;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.stepper-input:focus{outline:none}
.stepper-input::placeholder{color:rgba(255,255,255,.45)}
.stepper-btn{
  flex:0 0 52px;
  display:grid;
  place-items:center;
  border:none;
  background:rgba(255,255,255,.05);
  color:var(--gold-light);
  cursor:pointer;
  transition:background .18s ease, transform .12s ease, color .18s ease;
}
.stepper-btn:hover{
  background:rgba(200,155,60,.22);
  color:#fff;
}
.stepper-btn:active{
  transform:scale(.9);
  background:rgba(200,155,60,.35);
}
.stepper-btn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================================================
   flatpickr (Project Start Date) - dark/gold theme
   ============================================================ */
.flatpickr-calendar{
  background:#141414;
  border:1px solid rgba(200,155,60,.4);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  color:#f2f2f2;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after{
  border-bottom-color:#141414;
  border-top-color:#141414;
}
.flatpickr-months,
.flatpickr-month{
  color:#f2f2f2;
  fill:#f2f2f2;
}
.flatpickr-months{
  padding:6px 6px 2px;
  border-bottom:1px solid rgba(200,155,60,.28);
  margin-bottom:6px;
}
.flatpickr-current-month{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:1.06rem;
}
/* Month <select> was rendering as dark text on a dark panel */
.flatpickr-current-month .flatpickr-monthDropdown-months{
  background:transparent;
  color:var(--gold-light);
  font-weight:700;
  padding:4px 6px;
  border-radius:8px;
  transition:background .15s ease;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover{
  background:rgba(200,155,60,.18);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{
  background:#141414;
  color:#f2f2f2;
}
.flatpickr-current-month input.cur-year{
  color:var(--gold-light);
  font-weight:700;
}
.numInputWrapper:hover{background:rgba(200,155,60,.18);border-radius:8px}
.numInputWrapper span{border-color:rgba(200,155,60,.35)}
.numInputWrapper span:hover{background:rgba(200,155,60,.28)}
.numInputWrapper span.arrowUp:after{border-bottom-color:var(--gold-light)}
.numInputWrapper span.arrowDown:after{border-top-color:var(--gold-light)}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
  fill:var(--gold-light);
  color:var(--gold-light);
  padding:8px 10px;
  border-radius:8px;
  transition:background .15s ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover{
  background:rgba(200,155,60,.18);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg{
  fill:var(--gold-light);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{
  fill:#fff;
}
.flatpickr-weekdays{background:transparent}
span.flatpickr-weekday{color:var(--gold);font-weight:700}
.flatpickr-day{
  color:#e8e8e8;
  border-radius:9px;
}
.flatpickr-day:hover,
.flatpickr-day:focus{
  background:rgba(200,155,60,.22);
  border-color:transparent;
}
.flatpickr-day.today{
  border-color:var(--gold);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color:transparent;
  color:#111;
  font-weight:700;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color:rgba(255,255,255,.28);
}

/* ============================================================
   Tom Select (Equipment multi-select) - dark/gold theme
   ============================================================ */
.contact-form .ts-wrapper{
  min-width:0;
}
.contact-form .ts-control{
  min-height:54px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fff;
  padding:9px 14px;
  box-shadow:none;
  gap:8px;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-form .ts-wrapper.focus .ts-control{
  border-color:var(--gold-light);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(200,155,60,.12);
}
.contact-form .ts-control input{
  color:#fff !important;
}
.contact-form .ts-control input::placeholder{
  color:rgba(255,255,255,.45);
}
.contact-form .ts-control > .item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:#111;
  font-weight:700;
  border:none;
  border-radius:999px;
  padding:5px 10px;
  animation:chipIn .18s ease;
}
@keyframes chipIn{
  from{opacity:0;transform:translateY(4px) scale(.92)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.contact-form .ts-control > .item .remove{
  border-left:none;
  color:#111;
  opacity:.7;
  padding:0 2px;
  transition:opacity .15s ease;
}
.contact-form .ts-control > .item .remove:hover{
  opacity:1;
  background:transparent;
}
.contact-form .ts-dropdown{
  background:#141414;
  border:1px solid rgba(200,155,60,.4);
  border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  color:#f2f2f2;
  margin-top:6px;
  overflow:hidden;
}
.contact-form .ts-dropdown .option{
  padding:11px 14px;
  transition:background .15s ease;
}
.contact-form .ts-dropdown .option:hover,
.contact-form .ts-dropdown .active{
  background:rgba(200,155,60,.22);
  color:#fff;
}
.contact-form .ts-dropdown .option.selected{
  color:var(--gold-light);
}

.checkbox-field{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  color:#f7f7f7;
  font-weight:700;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.08);
}
.checkbox-field input{
  width:auto;
  margin:0;
  accent-color:var(--gold-light);
}
.form-note{
  margin:0;
  color:#d4d4d4;
  font-size:0.96rem;
  letter-spacing:.03em;
}
.form-submit{
  width:max-content;
  padding:14px 34px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:#111;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.form-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}
.toast{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%) translateY(-120%);
  opacity:0;
  z-index:1000;
  max-width:min(92vw,600px);
  padding:18px 24px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  border:1px solid rgba(255,255,255,.18);
  color:#111;
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.36);
  transition:transform .35s ease, opacity .35s ease;
}
.toast-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.toast-error{
  background:linear-gradient(135deg, #b94b42, #e17b68);
  color:#fff;
}
.footer{
  border-top:2px solid rgba(200,155,60,.9);
  padding-top:32px;
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.contact-card{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:0 22px;
  min-height:78px;
  border-right:1px solid rgba(255,255,255,.28);
}
.contact-card:last-child{border-right:none}
.contact-icon{
  color:var(--gold-light);
  width:42px;
  flex:0 0 42px;
}
.contact-card b{
  display:block;
  color:var(--gold-light);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:18px;
}
.contact-card p{
  margin:6px 0 0;
  color:#fff;
  font-size:17px;
}
.copyright{
  text-align:center;
  color:#b9b9b9;
  letter-spacing:.16em;
  font-size:14px;
  margin-top:28px;
}
@media(max-width:780px){
  .skeleton-shell{padding:28px 18px 40px}
  .skeleton-topbar{justify-content:center}
  .skeleton-brand{flex-direction:column;gap:14px}
  .skeleton-social{display:none}
  .skeleton-hero{padding-top:38px}
  .skeleton-features{grid-template-columns:1fr 1fr;gap:28px 0}
  .skeleton-feature:nth-child(2){border-right:0}
  .skeleton-panel{width:calc(100% + 36px);margin-left:-18px;padding-inline:18px}
  .skeleton-cta{grid-template-columns:1fr}
  .poster::before{opacity:.42;background-position:center top}
  .content{padding:28px 18px 22px}
  .topbar{justify-content:center}
  .brand{flex-direction:column;gap:14px;text-align:center}
  .social{display:none}
  .wordmark-tag{letter-spacing:.22em}
  .hero{padding-top:38px}
  .features{grid-template-columns:1fr 1fr;gap:28px 0;margin-bottom:42px}
  .feature:nth-child(2){border-right:none}
  .cta{grid-template-columns:1fr;text-align:center}
  .cta-title{text-align:center}
  .cta-contact{border-left:none;border-top:1px solid rgba(255,255,255,.35);padding:24px 0 0;margin-top:24px;text-align:center}
  .contact-grid{grid-template-columns:1fr}
  .contact-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.18);justify-content:flex-start}
  .contact-card:last-child{border-bottom:none}
}
@media(max-width:640px){
  .skeleton-form{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr;gap:16px}
  .contact-form-section{padding:26px clamp(16px,5vw,28px)}
}

@media(prefers-reduced-motion:reduce){
  .skeleton-shape::after{animation:none}
  .page-skeleton{transition-duration:.01ms}
}
