.elementor-13861 .elementor-element.elementor-element-e2a3576{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-0f5ab63{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-1050c05{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-fc40361{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-931a019{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-efb3823{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-021e90e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-454a9e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-5b5cc96{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-c7246d1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-5c4c0ca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13861 .elementor-element.elementor-element-c117a38{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6078031 */.tw-section {
  padding: 90px 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.tw-section h2 {
  font-size: 34px;
  margin-bottom: 48px;
}
.tw-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
}
.tw-feature h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.tw-feature p {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.7;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-34de58f */.ti-list {
  margin: 24px 0;
  padding-left: 20px;
}
.ti-list li {
  margin-bottom: 10px;
  font-size: 16px;
}
.ti-links a {
  color: #2563eb;
  text-decoration: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1a13faa */.tw-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
}
.tw-spec-table th,
.tw-spec-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
.tw-spec-table th {
  width: 30%;
  color: #0d1b2a;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ffe4355 *//* =========================================================
   Section 8: RFQ CTA (Refined, Apple-style)
========================================================= */

.tw-rfq{
  padding: 96px 24px;
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(58,166,255,0.10), rgba(13,27,42,0.00) 60%),
    #0d1b2a;
  color: #ffffff;
  text-align: center;
}

.tw-rfq-inner{
  max-width: 820px;
  margin: 0 auto;
}

.tw-rfq h2{
  margin: 0 0 16px 0;
  font-size: 34px;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: #ffffff;
}

.tw-rfq-desc{
  margin: 0 auto 28px auto;
  max-width: 680px;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.tw-rfq-actions{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tw-rfq .tw-btn-primary{
  padding: 14px 34px;
  font-size: 16px;
}

.tw-rfq .tw-btn-secondary{
  padding: 14px 30px;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color: #ffffff;
}

.tw-rfq .tw-btn-secondary:hover{
  background: rgba(255,255,255,0.16);
}

.tw-rfq-note{
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}

/* Mobile */
@media (max-width: 640px){
  .tw-rfq{
    padding: 80px 18px;
  }
  .tw-rfq h2{
    font-size: 28px;
  }
  .tw-rfq-desc{
    font-size: 15.5px;
  }
}/* End custom CSS */
/* Start custom CSS *//* =========================================================
   7Titanium · Titanium Whistles Landing Page
   FINAL PRODUCTION CSS (Apple-style)
   Scope: .tw-* only
========================================================= */


/* =========================================================
   Base / Reset (Safe)
========================================================= */

.tw-hero, .tw-section, .tw-collection, .tw-rfq, .tw-contact {
  box-sizing: border-box;
}
.tw-hero *, .tw-section *, .tw-collection *, .tw-rfq *, .tw-contact * {
  box-sizing: border-box;
}
.tw-sub { margin: 0; }


/* =========================================================
   Apple-style Fade Up Motion (ONLY version)
========================================================= */

.fade-up{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.fade-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* stagger support */
.fade-up[data-delay="1"]{ transition-delay: 0.06s; }
.fade-up[data-delay="2"]{ transition-delay: 0.12s; }
.fade-up[data-delay="3"]{ transition-delay: 0.18s; }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .fade-up{
    transition: none;
    transform: none;
    opacity: 1;
  }
}


/* =========================================================
   Buttons (Shared)
========================================================= */

.tw-btn-primary{
  display:inline-block;
  padding:14px 32px;
  border-radius:999px;
  background:#3aa6ff;
  color:#fff;
  text-decoration:none;
  font-weight:650;
  box-shadow:0 12px 30px rgba(58,166,255,0.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tw-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(58,166,255,0.32);
}

.tw-btn-secondary{
  display:inline-block;
  padding:14px 32px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:rgba(255,255,255,.85);
  color:#0d1b2a;
  font-weight:650;
  text-decoration:none;
  backdrop-filter:blur(10px);
  transition:transform .18s ease, background .18s ease;
}
.tw-btn-secondary:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.95);
}

.tw-btn-primary:focus,
.tw-btn-secondary:focus{
  outline:3px solid rgba(58,166,255,.35);
  outline-offset:2px;
}


/* =========================================================
   Section 1: Hero
========================================================= */

.tw-hero{
  position:relative;
  overflow:hidden;
  padding:120px 24px;
  text-align:center;
  background:#f8fafc;
}

.tw-hero-bg{
  position:absolute;
  inset:0;
  background-image:url("https://7titanium.com/wp-content/uploads/2025/12/20251214_2041_titanium-emergency-whistle_remix_01kcee0bs0f29rehy7d0stpe34.webp");
  background-size:cover;
  background-position:center 35%;
  transform:scale(1.06);
  filter:saturate(1.15) contrast(1.08);
  z-index:0;
}
.tw-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1200px 600px at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,.12) 100%);
}

.tw-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 50% 40%, rgba(248,250,252,.62) 0%, rgba(248,250,252,.28) 55%, rgba(248,250,252,.55) 100%),
    linear-gradient(to bottom, rgba(248,250,252,.35), rgba(248,250,252,.55));
  backdrop-filter:blur(2px);
  z-index:1;
}

.tw-hero-inner{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:0 auto;
}

.tw-hero h1{
  margin:0;
  font-size:46px;
  font-weight:650;
  letter-spacing:-.02em;
  color:#0d1b2a;
}

.tw-hero-sub{
  margin-top:24px;
  font-size:18px;
  line-height:1.65;
  color:#5b6777;
}

.tw-hero-cta{
  margin-top:36px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

@media(max-width:640px){
  .tw-hero{padding:92px 18px;}
  .tw-hero h1{font-size:34px;}
  .tw-hero-sub{font-size:16px;}
}


/* =========================================================
   Generic Content Section (2 / 5 / 6 / 7)
========================================================= */

.tw-section{
  padding:90px 24px;
  max-width:1080px;
  margin:0 auto;
}

.tw-section h2{
  margin:0 0 18px;
  font-size:34px;
  letter-spacing:-.02em;
  color:#0d1b2a;
}

.tw-section h3{
  margin:0 0 10px;
  font-size:20px;
  color:#0d1b2a;
}

.tw-section p{
  margin:0 0 14px;
  font-size:16.5px;
  line-height:1.75;
  color:#4b5563;
}


/* =========================================================
   Section 3: Collection / Product Grid
========================================================= */

.tw-collection{
  padding:96px 24px;
  background:#ffffff;
}

.tw-collection-inner{
  max-width:1080px;
  margin:0 auto;
}

.tw-collection-head{
  display:flex;
  justify-content:space-between;
  gap:26px;
  margin-bottom:18px;
}

.tw-collection-head h2{
  margin:0 0 10px;
  font-size:34px;
}

.tw-collection-head .tw-sub{
  max-width:760px;
  font-size:16.5px;
  color:#5b6777;
}

.tw-collection-actions{
  display:flex;
  gap:12px;
  white-space:nowrap;
}

.tw-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:22px 0 34px;
}
.tw-chip{
  padding:8px 12px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  font-size:13px;
  font-weight:600;
  color:#475569;
}

.tw-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.tw-card{
  background:#fff;
  border-radius:18px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  box-shadow:0 14px 44px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tw-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 62px rgba(15,23,42,.10);
}

.tw-card-media img{
  width:100%;
  height:320px;
  object-fit:cover;
}

.tw-badges{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  gap:8px;
}

.tw-badge{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(203,213,225,.9);
  font-size:12px;
  font-weight:700;
}

.tw-card-body{
  padding:18px;
}

.tw-card-title{
  margin:0 0 10px;
  font-size:18px;
}

.tw-card-desc{
  font-size:14.8px;
  line-height:1.7;
  color:#4b5563;
}

.tw-mini-spec{
  margin:0;
  padding-top:12px;
  border-top:1px solid #eef2f7;
  list-style:none;
  display:grid;
  gap:8px;
}

.tw-card-cta{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #eef2f7;
}

.tw-link{
  font-size:14px;
  font-weight:650;
  color:#0f172a;
  text-decoration:none;
}
.tw-link-strong{color:#3aa6ff;}

@media(max-width:1024px){
  .tw-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  .tw-collection-head{flex-direction:column;}
  .tw-grid{grid-template-columns:1fr;}
}


/* =========================================================
   Section 5: Specs Table
========================================================= */

.tw-spec-table{
  width:100%;
  border-collapse:collapse;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e5e7eb;
}
.tw-spec-table th,
.tw-spec-table td{
  padding:14px 16px;
  border-bottom:1px solid #eef2f7;
}
.tw-spec-table th{
  width:32%;
  background:#f8fafc;
  font-weight:650;
}


/* =========================================================
   Section 8: RFQ CTA
========================================================= */

.tw-rfq{
  padding:96px 24px;
  background:#0d1b2a;
  color:#fff;
  text-align:center;
}

.tw-rfq-inner{
  max-width:820px;
  margin:0 auto;
}

.tw-rfq h2{
  margin:0 0 16px;
  font-size:34px;
}

.tw-rfq p{
  font-size:16.5px;
  line-height:1.7;
  color:rgba(255,255,255,.85);
}

.tw-rfq .tw-btn-primary{
  margin-top:18px;
  box-shadow:0 16px 48px rgba(58,166,255,.25);
}

/* ===== Fix Collection Header Layout ===== */
.tw-collection-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 32px !important;
  max-width: 1200px;
  margin: 0 auto 32px auto;
}

.tw-collection-head > div:first-child{
  max-width: 620px;
}

.tw-collection-actions{
  display: flex !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

.tw-collection-actions a{
  width: auto !important;
  white-space: nowrap;
}

/* Mobile stack */
@media (max-width: 768px){
  .tw-collection-head{
    flex-direction: column;
  }
}
/* ===== Chips polish ===== */
.tw-chips{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 36px auto;
  max-width: 1200px;
}

.tw-chip{
  padding: 8px 16px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
}
/* ===== WPForms Apple Style ===== */
.tw-form-wrap{
  max-width: 720px;
  margin-top: 40px;
  padding: 32px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 60px rgba(15,23,42,0.08);
}

.tw-form-wrap .wpforms-field input,
.tw-form-wrap .wpforms-field textarea{
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
}

.tw-form-wrap .wpforms-submit{
  border-radius: 999px !important;
  padding: 14px 34px !important;
  background: #3aa6ff !important;
  font-weight: 600 !important;
}/* End custom CSS */