:root{
  --navy:#0b3b66;
  --blue:#0b78bc;
  --teal:#1db9ae;
  --text:#274e69;
  --pale:#edf8fb;
  --line:#d5e7ef;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
}

.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.nav-wrap{
  max-width:1420px;
  min-height:94px;
  margin:auto;
  padding:12px 26px;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  min-width:300px;
  text-decoration:none;
}

.brand-main{
  color:var(--teal);
  font-size:2rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:-1px;
  line-height:1;
}

.brand-sub{
  color:var(--navy);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.34em;
  margin-left:25px;
}

.brand-tag{
  color:var(--teal);
  font-size:.9rem;
  font-style:italic;
  font-weight:700;
  margin-left:63px;
  margin-top:2px;
}

.main-nav{
  display:flex;
  justify-content:center;
  gap:24px;
  flex:1;
}

.main-nav a{
  color:var(--navy);
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  font-size:.79rem;
}

.nav-cta{
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:14px 20px;
  border-radius:8px;
  white-space:nowrap;
}

.hero{
  background:
    radial-gradient(circle at 75% 35%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(110deg,#f8fcfe 0%,#eef8fb 46%,#e6f4f8 100%);
  padding:70px 24px 78px;
}

.hero-shell{
  max-width:1380px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:center;
}

.hero-copy{
  padding-left:8px;
}

.eyebrow{
  margin:0 0 14px;
  color:var(--teal);
  font-size:.9rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.hero h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(3.6rem,5.4vw,6rem);
  line-height:.97;
  letter-spacing:-3px;
  font-weight:900;
}

.hero-text{
  max-width:650px;
  margin:28px 0 26px;
  color:#3d6179;
  font-size:1.04rem;
  line-height:1.58;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  min-height:48px;
  padding:0 22px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  text-decoration:none;
  font-weight:800;
}

.btn-primary{
  background:linear-gradient(135deg,#0b87cb,#0969a6);
  color:white;
  box-shadow:0 10px 24px rgba(11,120,188,.18);
}

.btn-outline{
  background:#fff;
  color:var(--navy);
  border:1px solid #8ebfd4;
}

.hero-checks{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:28px;
  color:var(--navy);
  font-size:.8rem;
  font-weight:800;
}

.hero-checks span::before{
  content:"✓";
  color:var(--teal);
  margin-right:6px;
  font-size:1rem;
}

.hero-photo{
  min-height:560px;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 22px 60px rgba(7,50,84,.18);
  border:1px solid rgba(164,205,221,.8);

  /*
    This uses the generated mockup image but crops away the text on the left.
    background-size/background-position are tuned so only the printer,
    monitor and night guard appear in this panel.
  */
  background-image:url("../images/bruxtech-hero-visual.png");
  background-repeat:no-repeat;
  background-size:205% auto;
  background-position:89% 50%;
}

@media(max-width:1050px){
  .nav-cta{display:none}
  .main-nav{gap:14px}
  .hero-shell{grid-template-columns:1fr}
  .hero-copy{padding:0}
  .hero-photo{min-height:500px}
}

@media(max-width:760px){
  .nav-wrap{flex-wrap:wrap}
  .brand{min-width:220px}
  .main-nav{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:4px;
  }
  .hero{padding:48px 20px}
  .hero h1{
    font-size:3.4rem;
    letter-spacing:-2px;
  }
  .hero-actions .btn{width:100%}
  .hero-checks{display:grid;gap:8px}
  .hero-photo{
    min-height:390px;
    background-size:215% auto;
    background-position:88% 50%;
  }
}
.page-hero {
    background: linear-gradient(120deg,#eef8fb,#f9fcfe);
    border-bottom: 1px solid #dbe8ef;
}

.page-hero-inner {
    max-width: 1280px;
    margin: auto;
    padding: 70px 30px;
}

.page-hero h1 {
    margin: 0;
    color: #08365d;
    font-size: clamp(2.5rem,4vw,4rem);
    line-height: 1.05;
}

.page-hero p {
    color: #607687;
    max-width: 750px;
}

.section {
    max-width: 1280px;
    margin: auto;
    padding: 80px 30px;
}

.contact-section {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 55px;
    align-items: start;
}

.contact-info h2 {
    color: #08365d;
    font-size: 2.5rem;
    margin-top: 0;
}

.contact-info p {
    font-size: 1rem;
    color: #607687;
}

.contact-info a {
    color: #0b82c6;
    text-decoration: none;
}

.contact-form {
    background: #f4f9fc;
    border: 1px solid #dbe8ef;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 15px 40px rgba(5,54,90,.08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-form label {
    display: block;
    color: #08365d;
    font-weight: 700;
    margin-bottom: 17px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 13px 14px;
    border: 1px solid #bfd2df;
    border-radius: 9px;
    background: white;
    font: inherit;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: #21b7ad;
    box-shadow: 0 0 0 3px rgba(33,183,173,.12);
}

/* Hides anti-spam Website field */
.hidden-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.notice {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.notice.success {
    background: #e7f8f3;
    border: 1px solid #bfe8de;
}

.notice.error {
    background: #fff0f0;
    border: 1px solid #efcccc;
}


/* FOOTER FIX */

.site-footer {
    margin-top: 30px;
    background: #052744;
    color: #d9e9f3;
}

.footer-grid {
    max-width: 1280px;
    margin: auto;
    padding: 48px 30px 32px;
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 34px;
}

.footer-grid h3 {
    color: white;
    margin-top: 0;
}

.footer-grid a {
    color: #d9e9f3;
    text-decoration: none;
}

.footer-brand strong {
    display: block;
    color: #6ed8cf;
    font-size: 1.2rem;
}

.footer-brand em {
    display: block;
    color: white;
    margin-top: 4px;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 16px;
    font-size: .8rem;
    color: #8eabbf;
}

.back-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #08365d;
    color: white;
}


/* MOBILE */

@media (max-width: 800px) {

    .contact-section {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {

    .section,
    .page-hero-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}