/* --- Basic reset --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: #ffffff;
  background: #0a0f12;
  line-height: 1.55;
}

html{
  scroll-behavior: smooth;
}

/* --- Theme tokens to match screenshots --- */
:root{
  --nav-offset: 120px;
  --teal: #5aa3c3;          /* main section blue */
  --teal-dark: #2e8faf;     /* buttons / bars */
  --teal-bar: #0c8aa2;      /* footer strip */
  --neon: #d7ff3a;          /* big yellow headings */
  --navText: #1a86a7;       /* nav link teal */
  --formBlue: #1a63c8;      /* input fill blue */
  --formBorder: rgba(255,255,255,.65);
  --glass: rgba(255,255,255,.55);
  --glass2: rgba(255,255,255,.70);
}
[id]{
  scroll-margin-top: var(--nav-offset);
}

/* --- Global polish --- */
body{
  line-height: 1.55;
}

.copyCard,
.productCopy,
.safetyBox,
.videoWrap{
  border-radius: 12px;
}

.navlinks a{
  text-decoration: none;
  color: var(--navText);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

/* --- Top glass nav --- */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.logo-img{
  height: 56px;           /* mobile / default */
  width: auto;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}
@media (min-width: 980px){
  .logo-img{
    height: 78px;         /* desktop */
  }
}

.logo:hover .logo-img{
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.logo{
  cursor: pointer;
}

.logo:active .logo-img{
  transform: scale(.98);
}

.topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo{ text-decoration:none; color:#0b2330; }
.logo-script{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .2px;
}
.navlinks{
  display: flex;
  gap: 22px;
  align-items: center;
  margin-left: 18px;
  flex: 1;
}
.navlinks a{
  text-decoration: none;
  color: var(--navText);
  font-weight: 700;
  font-size: 14px;
}
.navright{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0b2330;
}
.icon{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,.35);
  text-decoration:none;
  color: #0b2330;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease;
}
.icon:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.icon svg{
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}
.phone{ font-weight: 700; font-size: 14px; opacity: .9; }

.menuBtn{
  display:none;
  border: 0;
  background: rgba(255,255,255,.35);
  border-radius: 8px;
  width: 40px; height: 34px;
  font-size: 18px;
}

.mobileMenu{
  display:none;
  flex-direction:column;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.mobileMenu a{
  color: #0b2330;
  text-decoration:none;
  font-weight: 700;
}
.mobileMenu.open{ display:flex; }

/* --- Hero (homepage layout like screenshot) --- */
.hero{
  padding-top: 120px; /* clears tall nav + logo */
  margin-top: 0;
  min-height: 680px;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.10)),
    url("hero.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-logo{
  width: min(900px, 92vw);
  height: auto;
  display: block;
  transform: translateY(-60px); /* move logo UP */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

.hero-overlay{
  min-height: 680px;
  display:flex;
  align-items:stretch;
}

.hero-grid{
  width: min(1200px, 94%);
  margin: 0 auto;
  padding: 54px 0 44px;
  display:grid;
  grid-template-columns: 1fr 2fr 1.2fr;
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  row-gap: 22px;
  position: relative;
}

/* left column */
.hero-left{
  grid-column: 1;
  grid-row: 2;
  display:flex;
  align-items:flex-start;
}

/* big button like screenshot */
.hero-contact{
  padding: 14px 38px;
  font-size: 20px;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* center logo */
.hero-center{
  grid-column: 1 / -1;
  grid-row: 1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.hero-script{
  font-size: 92px;
  line-height: .88;
  margin: 0;
  color: #ff3a2a;  /* red/orange */
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
  letter-spacing: .4px;
}

/* right tagline block */
.hero-right{
  grid-column: 3;
  grid-row: 2;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}

.hero-tagline{
  width: min(420px, 100%);
  text-align:left;
  color: var(--neon);
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}

.tagline-title{
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: .2px;
}

.tagline-sub{
  font-size: 15px;
  color: rgba(215,255,58,.94);
  line-height: 1.5;
}

/* responsive hero */
@media (max-width: 980px){
  .hero{ min-height: 640px; }
  .hero-overlay{ min-height: 640px; }

  .hero-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 40px 0 36px;
  }

  .hero-center{ grid-column: 1; grid-row: 1; }
  .hero-left{ grid-column: 1; grid-row: 2; justify-content:center; }
  .hero-right{ grid-column: 1; grid-row: 3; justify-content:center; }

  .hero-script{ font-size: 60px; text-align:center; }
  .hero-tagline{ text-align:center; }
}

/* --- Buttons like your old site --- */
.btn{
  display:inline-block;
  padding: 12px 20px;
  border: 0;
  text-decoration:none;
  font-weight: 800;
  cursor:pointer;
  border-radius: 10px;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  filter: brightness(1.02);
}

.btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.btn-teal{
  background: #0e7f92;
  color: var(--neon);
}
.btn-green{
  background: #0a7d8d;
  color: var(--neon);
}
.btn-white{
  background: #ffffff;
  color: #1a63c8;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.20);
}
.btn.wide{ width: 100%; }

/* --- Section “strips” --- */
.strip{
  padding: 46px 0;
}
.strip.teal{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.10)),
    var(--teal);
}
.strip-inner{
  width: min(1080px, 92%);
  margin: 0 auto;
}
.strip-inner.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
}

/* video strip */
.videoWrap{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  padding: 12px;
  border-radius: 8px;
  margin: 14px 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Responsive 16:9 with no layout shift */
.videoWrap iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: 6px;
  background: rgba(0,0,0,.25);
}

/* image placeholders (replace later) */
.photoCard{ background: transparent; }
.photo{
  width:100%;
  height: 320px;
  background-size: cover;
  background-position:center;
  border: 1px solid rgba(255,255,255,.25);
}
.ph1{ background-image: url("hero.jpg"); }   /* replace with real build photo */
.ph2{ background-image: url("rope.jpg"); }   /* detail photo */
.ph3{ background-image: url("hero.jpg"); }
.ph4{ background-image: url("hero.jpg"); }

.copyCard{
  background: rgba(0,0,0,.10);
  padding: 18px 18px 22px;
  border: 1px solid rgba(255,255,255,.22);
}
.copyCard p{ margin: 10px 0 14px; color: rgba(255,255,255,.90); }

/* hand-written yellow section headlines */
.script-yellow{
  margin: 0 0 8px;
  color: var(--neon);
  font-size: 28px;
  font-weight: 900;
}

/* “header with rope photo + big yellow title” */
.sectionHeader{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url("rope.jpg");
  background-size: cover;
  background-position:center;
  padding: 70px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sectionHeader-inner{
  width: min(1100px, 92%);
  margin: 0 auto;
  text-align:center;
}
.bigYellow{
  margin: 0;
  color: var(--neon);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: .5px;
  text-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Safety centered box */
.centerCard{ display:flex; justify-content:center; }
.safetyBox{
  width: min(560px, 92%);
  background: rgba(0,0,0,.18);
  padding: 18px 18px 22px;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}

/* Products rows like screenshot */
.productRow{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 22px;
  margin: 18px 0 28px;
}
.productPhoto{
  height: 320px;
  background-size: cover;
  background-position:center;
  border: 1px solid rgba(255,255,255,.25);
}
.productCopy{
  background: rgba(0,0,0,.10);
  padding: 18px 18px 22px;
  border: 1px solid rgba(255,255,255,.22);
}
.productTitle{
  color: var(--neon);
  font-weight: 900;
  margin-bottom: 10px;
}
.productCopy p{ color: rgba(255,255,255,.92); }

.copyCard p,
.productCopy p,
.safetyBox p{
  color: rgba(255,255,255,.92);
}


/* Form center (Get a Net) */
.formCenter{ text-align:center; }
.formHeading{
  margin: 6px 0 18px;
  color: rgba(255,255,255,.90);
  font-weight: 800;
  font-size: 20px;
}
.bigForm{
  width: min(520px, 92%);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
  text-align:left;
}
.bigForm label, .contactForm label{
  font-size: 13px;
  color: rgba(255,255,255,.92);
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.bigForm input,
.bigForm select,
.bigForm textarea,
.contactForm input,
.contactForm textarea {
  padding: 12px 12px;
  border: 1px solid var(--formBorder);
  background: var(--formBlue);
  color: #fff;
  font-size: 14px;
  font-family: inherit;   /* ← THIS is the key line */
  outline: none;
}

/* Smooth form -> success transition without page jump */
.formStage{
  position: relative;
}

.formStage .bigForm,
.formStage .formSuccess{
  transition: opacity .35s ease, transform .35s ease;
}

.formStage .formSuccess{
  opacity: 0;
  transform: translateY(8px);
}

.formStage.is-sent .bigForm{
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.formStage.is-sent .formSuccess{
  opacity: 1;
  transform: translateY(0);
}

.bigForm textarea{ resize: vertical; }
.bigForm select{ appearance: auto; }

/* Placeholder text styling */
.bigForm input::placeholder,
.bigForm textarea::placeholder,
.contactForm input::placeholder,
.contactForm textarea::placeholder {
  color: rgba(255,255,255,.65);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.formSuccess{
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  background: rgba(0,0,0,.15);
  padding: 28px 24px;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--neon);
}

.formSuccess p{
  color: rgba(255,255,255,.9);
  margin-top: 10px;
}


/* Contact split (left white, right teal) */
.contactSplit{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,.22);
}
.contactLeft{
  background: #ffffff;
  color: #1a86a7;
  padding: 34px 22px;
  text-align:center;
}
.contactLeft h3{
  margin: 0 0 12px;
  font-size: 30px;
  color: #1a86a7;
}
.contactInfo{
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
  font-weight: 800;
}
.contactInfo a{ color:#1a86a7; text-decoration:none; }
.contactIcons{ display:flex; gap: 10px; margin-top: 8px; }

.contactRight{
  padding: 26px 22px 30px;
}
.formHeading2{
  margin: 0 0 14px;
  color: var(--neon);
  font-weight: 900;
  font-size: 26px;
  text-align:center;
}
.contactForm{
  width: min(680px, 100%);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.contactForm textarea{ resize: vertical; }

/* Footer */
.footer{
  background: var(--teal-bar);
  padding: 18px 0;
}
.footer-inner{
  width: min(1100px, 92%);
  margin: 0 auto;
  text-align:center;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}

/* Responsive */
@media (min-width: 980px){
  :root{
    --nav-offset: 140px;
  }
}
@media (max-width: 980px){
  .navlinks{ display:none; }
  .menuBtn{ display:inline-block; }
  .phone{ display:none; }

  .hero-script{ font-size: 56px; }
  .bigYellow{ font-size: 44px; }

  .strip-inner.split{ grid-template-columns: 1fr; }
  .productRow{ grid-template-columns: 1fr; }
  .productPhoto{ height: 260px; }

  .contactSplit{ grid-template-columns: 1fr; }
  .contactLeft{ padding: 22px 18px; }
}