@charset "utf-8";
/* CSS Document */

    :root{
      --sg-blue:#0063A6;
      --sg-blue-dark:#0B4F84;
      --sg-blue-soft:#EAF4FB;
      --sg-text:#16202A;
      --sg-text-soft:#5D6A75;
      --sg-bg:#F5F7FA;
      --sg-white:#FFFFFF;
      --sg-border:rgba(11,79,132,.10);
      --sg-shadow:0 18px 50px rgba(12,34,56,.10);
      --sg-radius:22px;
      --sg-radius-sm:14px;
      --container:1240px;
    }

    *{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--sg-text);
      background:var(--sg-bg);
      line-height:1.55;
    }

    img{
      max-width:100%;
      display:block;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    .container{
      width:min(var(--container), calc(100% - 40px));
      margin:0 auto;
    }

    /* HEADER */
    .sg-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    
    @media (max-width: 700px) {

     .sg-header{
        position: static !important;
        top: auto !important;
    }

}

    .sg-header__inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      min-height:82px;
    }

    .sg-logo{
      display:flex;
      align-items:center;
      gap:14px;
      font-size:26px;
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--sg-blue-dark);
      white-space:nowrap;
    }

    .sg-logo-badge{
      width:44px;
      height:44px;
      border-radius:12px;
      background:linear-gradient(135deg, var(--sg-blue) 0%, var(--sg-blue-dark) 100%);
      box-shadow:0 10px 24px rgba(0,99,166,.28);
      position:relative;
      flex:0 0 auto;
    }

    .sg-logo-badge:before,
    .sg-logo-badge:after{
      content:"";
      position:absolute;
      background:rgba(255,255,255,.95);
      border-radius:10px;
    }

    .sg-logo-badge:before{
      width:24px;
      height:8px;
      left:10px;
      top:11px;
      transform:skewX(-25deg);
    }

    .sg-logo-badge:after{
      width:20px;
      height:8px;
      left:13px;
      top:24px;
      transform:skewX(-25deg);
    }

    .sg-nav{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

.sg-nav a{
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  transition:.2s ease;
}


    .sg-nav a:hover{
      background:var(--sg-blue-soft);
      color:var(--sg-blue-dark);
    }

    .sg-nav .sg-btn{
      padding:13px 20px;
    }

    /* BUTTONS */
    .sg-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border:none;
      border-radius:999px;
      font-weight:700;
      font-size:15px;
      cursor:pointer;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .sg-btn:hover{
      transform:translateY(-1px);
    }

    .sg-btn--primary{
      color:#fff!important;
      background:linear-gradient(135deg, var(--sg-blue) 0%, var(--sg-blue-dark) 100%);
      box-shadow:0 14px 30px rgba(0,99,166,.26);
      padding:15px 24px;
    }
    
    
     .sg-btn--tech{

      background:#e6e6e6;
    /*  box-shadow:0 14px 30px rgba(0,99,166,.26);*/
      padding:10px 20px;
    }
    
    .sg-btn--primary,
.sg-btn--primary:link,
.sg-btn--primary:visited {
  color:#fff !important;
}


.sg-btn--primary:link,
.sg-btn--primary:visited,
.sg-btn--primary:hover,
.sg-btn--primary:active {
  color:#000 !important;
}

    .sg-btn--secondary{
      color:var(--sg-blue-dark);
      background:#fff;
      border:1px solid rgba(11,79,132,.12);
      box-shadow:0 8px 18px rgba(10,30,50,.05);
      padding:15px 24px;
    }

    /* HERO */
.sg-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(11,79,132,.95) 0%, rgba(0,99,166,.84) 32%, rgba(0,99,166,.30) 60%, rgba(0,99,166,.08) 100%),
    url('../images/3pane-1.jpg') 72% center / cover no-repeat;
  color:#fff;
}

    .sg-hero:after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:40px;
     /* background:linear-gradient(to bottom, rgba(245,247,250,0) 0%, rgba(245,247,250,1) 100%);*/
      pointer-events:none;
    }

    .sg-hero__inner{
      position:relative;
      z-index:2;
      min-height:200px;
      display:grid;
      grid-template-columns:minmax(0, 1.1fr) minmax(340px, 480px);
      align-items:center;
      gap:44px;
      padding:36px 0 20px;
    }

    .sg-hero__content{
      max-width:690px;
    }

    .sg-kicker{
      /*display:inline-flex;*/
      display: none;
      align-items:center;
      gap:10px;
      margin:0 0 18px;
      padding:9px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.13);
      border:1px solid rgba(255,255,255,.15);
      font-size:12px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .sg-hero h1{
      margin:0 0 18px;
      font-size:clamp(40px, 5vw, 58px);
      line-height:1.02;
      letter-spacing:-.04em;
      font-weight:800;
    }

    .sg-hero p{
      margin:0;
      max-width:600px;
      font-size:clamp(18px, 2vw, 21px);
      color:rgba(255,255,255,.90);
    }

    .sg-hero__actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:32px;
    }

    .sg-hero__card{
      justify-self:end;
      width:100%;
      background:rgba(255,255,255,.92);
      color:var(--sg-text);
      border:1px solid rgba(255,255,255,.45);
      border-radius:28px;
      box-shadow:0 30px 80px rgba(8,28,48,.22);
      padding:28px;
      backdrop-filter:blur(8px);
    }

    .sg-hero__card h2{
      margin:0 0 10px;
      font-size:28px;
      line-height:1.12;
      letter-spacing:-.03em;
      color:var(--sg-blue-dark);
    }

    .sg-hero__card p{
      margin:0 0 18px;
      color:var(--sg-text-soft);
      font-size:15px;
      line-height:1.6;
    }

    .sg-mini-points{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin:20px 0 0;
      padding:0;
      list-style:none;
    }

    .sg-mini-points li{
      background:#fff;
      border:1px solid var(--sg-border);
      border-radius:16px;
      padding:14px 14px 13px;
      font-size:14px;
      font-weight:700;
      color:var(--sg-text);
      box-shadow:0 10px 24px rgba(0,0,0,.04);
    }


.sg-hero__benefits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 30px;
  max-width: 460px;
}

.sg-hero__benefits span {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: 999px;
  /*background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);*/
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  backdrop-filter: blur(3px);
}







.sg-reassurance-strip {
  margin: 22px 18px 0;
  padding: 12px 18px;
  background: #f1f1f1;
  border: 1px solid #d7d7d7;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #555;
  font-style: italic;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.sg-reassurance-strip span {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .sg-reassurance-strip {
    margin: 18px 0 0;
    gap: 10px 18px;
    font-size: 13px;
    justify-content: flex-start;
  }

  .sg-reassurance-strip span {
    width: 100%;
    white-space: normal;
  }
}
    /* INTRO */
    .sg-intro{
      padding:28px 0 10px;
    }

    .sg-intro__card{
      background:#fff;
      border:1px solid var(--sg-border);
      border-radius:24px;
      box-shadow:var(--sg-shadow);
      padding:34px 38px;
      margin-top:-54px;
      position:relative;
      z-index:3;
    }

    .sg-intro__card h2{
      margin:0 0 10px;
      color:var(--sg-blue-dark);
      font-size:34px;
      letter-spacing:-.03em;
      line-height:1.08;
    }

    .sg-intro__card p{
      margin:0;
      max-width:900px;
      color:var(--sg-text-soft);
      font-size:17px;
    }

    /* ESTIMATOR */
    .sg-estimator{
      padding:34px 0 34px;
    }

    .sg-estimator-shell{
      background:#fff;
      border:1px solid var(--sg-border);
      border-radius:28px;
      box-shadow:0 22px 60px rgba(9,32,54,.09);
      overflow:hidden;
    }

    .sg-estimator-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:26px 28px;
      border-bottom:1px solid rgba(0,0,0,.05);
      background:linear-gradient(180deg, #fdfefe 0%, #f5f9fc 100%);
    }

     .sg-estimator-head > div{
  width:100%;
  text-align:center;
}

.sg-estimator-head p{
  max-width:100%;
  margin:0 auto;
}


    .sg-estimator-head h2{
      margin:0 0 5px;
      font-size:32px;
      line-height:1.08;
      letter-spacing:-.03em;
      color:var(--sg-blue-dark);
    }

    .sg-estimator-head p{
      margin:0;
      color:var(--sg-text-soft);
      font-size:15px;
    }

    .sg-stepper{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .sg-step{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background:#eef6fb;
      color:var(--sg-blue-dark);
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
    }

    .sg-step__num{
      width:24px;
      height:24px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--sg-blue);
      color:#fff;
      font-size:12px;
      font-weight:800;
      flex:0 0 auto;
    }

    .sg-estimator-body{
      display:grid;
      grid-template-columns:320px minmax(0, 1fr);
      gap:0;
    }

    .sg-estimator-side{
      background:linear-gradient(180deg, #f8fbfe 0%, #eef5fa 100%);
      border-right:1px solid rgba(0,0,0,.05);
      padding:28px;
    }

    .sg-system-visual{
      aspect-ratio:1 / 1;
      border-radius:26px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(233,242,248,1) 100%);
      border:1px solid rgba(11,79,132,.10);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
      position:relative;
      overflow:hidden;
      margin-bottom:22px;
    }

    .sg-system-visual:before{
      content:"";
      position:absolute;
      left:24%;
      top:12%;
      width:52%;
      height:74%;
      border:7px solid #8ba8bc;
      border-right-width:4px;
      background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(228,239,246,.9) 100%);
      transform:skewY(-8deg);
      border-radius:10px;
      box-shadow:18px 0 0 rgba(122,149,168,.18);
    }

    .sg-system-visual:after{
      content:"Secondary Glazing";
      position:absolute;
      left:18px;
      bottom:18px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(0,99,166,.10);
      color:var(--sg-blue-dark);
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .sg-side-copy h3{
      margin:0 0 8px;
      font-size:22px;
      color:var(--sg-blue-dark);
      letter-spacing:-.02em;
    }

    .sg-side-copy p{
      margin:0 0 18px;
      font-size:15px;
      color:var(--sg-text-soft);
    }

    .sg-side-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }

    .sg-side-list li{
      padding:12px 14px;
      border-radius:14px;
      background:#fff;
      border:1px solid rgba(11,79,132,.08);
      font-size:14px;
      font-weight:700;
    }

    .sg-estimator-main{
      padding:28px;
    }

    .sg-form-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:18px 18px;
    }

    .sg-field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .sg-field label{
      font-size:13px;
      font-weight:800;
      color:var(--sg-blue-dark);
      letter-spacing:.02em;
      text-transform:uppercase;
    }

    .sg-field input,
    .sg-field select{
      height:52px;
      border:1px solid rgba(11,79,132,.15);
      border-radius:14px;
      padding:0 16px;
      font-size:15px;
      color:var(--sg-text);
      background:#fff;
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease;
    }

    .sg-field input:focus,
    .sg-field select:focus{
      border-color:var(--sg-blue);
      box-shadow:0 0 0 4px rgba(0,99,166,.10);
    }

    .sg-field--full{
      grid-column:1 / -1;
    }

    .sg-estimator-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      margin-top:22px;
      padding-top:22px;
      border-top:1px solid rgba(0,0,0,.06);
    }

    .sg-price-box{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .sg-price-label{
      font-size:13px;
      font-weight:800;
      color:var(--sg-text-soft);
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .sg-price{
      font-size:34px;
      font-weight:800;
      letter-spacing:-.04em;
      color:var(--sg-blue-dark);
    }

    /* TRUST STRIP */

    .sg-trust{
      padding:8px 0 44px;
    }

    .sg-trust-grid{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:18px;
    }

    .sg-trust-card{
      background:#fff;
      border:1px solid var(--sg-border);
      border-radius:20px;
      padding:22px 20px;
      box-shadow:0 12px 28px rgba(7,27,46,.05);
    }

    .sg-trust-icon{
      width:46px;
      height:46px;
      border-radius:14px;
      background:linear-gradient(135deg, var(--sg-blue-soft) 0%, #d8ebf8 100%);
      margin-bottom:14px;
      position:relative;
    }

    .sg-trust-icon:before{
      content:"";
      position:absolute;
      inset:13px;
      border-radius:8px;
      background:linear-gradient(135deg, var(--sg-blue) 0%, var(--sg-blue-dark) 100%);
    }

    .sg-trust-card h3{
      margin:0 0 6px;
      font-size:18px;
      color:var(--sg-blue-dark);
      letter-spacing:-.02em;
    }

    .sg-trust-card p{
      margin:0;
      color:var(--sg-text-soft);
      font-size:14px;
    }

    /* SYSTEMS */
    .sg-systems{
      padding:36px 0 26px;
    }

    .sg-section-head{
      margin-bottom:26px;
    }

    .sg-section-kicker{
      margin:0 0 10px;
      color:var(--sg-blue);
      font-size:12px;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    .sg-section-head h2{
      margin:0 0 10px;
      font-size:40px;
      line-height:1.04;
      letter-spacing:-.04em;
      color:var(--sg-blue-dark);
    }

    .sg-section-head p{
      margin:0;
      max-width:800px;
      color:var(--sg-text-soft);
      font-size:17px;
    }

    .sg-systems-grid{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:20px;
    }

    .sg-system-card{
      background:#fff;
      border:1px solid var(--sg-border);
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 14px 34px rgba(7,27,46,.05);
      transition:transform .18s ease, box-shadow .18s ease;
    }

    .sg-system-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 42px rgba(7,27,46,.09);
    }

    .sg-system-card__img{
      height:210px;
      background-size:cover;
      background-position:center;
      position:relative;
    }

    .sg-system-card__img:after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:80px;
      background:linear-gradient(to top, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 100%);
    }

    .sg-system-card__body{
      padding:22px;
    }

    .sg-system-card h3{
      margin:0 0 8px;
      font-size:24px;
      letter-spacing:-.03em;
      color:var(--sg-blue-dark);
    }

    .sg-system-card p{
      margin:0 0 16px;
      color:var(--sg-text-soft);
      font-size:15px;
    }



.system-image{
    float: right;       /* or left */
    width: 180px;
    height: auto;
    margin: 0 0 15px 20px;
}
.sg-system-note {
    margin-top: auto;
    padding: 10px;
    border-radius: 10px;
    background: #f4f8fb;
    font-size: 13px;
    color: #4d6172;
    }
    
    
    .sg-system-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}


    .sg-system-list li {
    list-style: none;
}

    .sg-text-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--sg-blue);
      font-weight:800;
      font-size:14px;
    }

    /* INFO SPLIT */
    .sg-info{
      padding:34px 0 26px;
    }

    .sg-info-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:22px;
    }

    .sg-info-card,
    .sg-help-card{
      background:#fff;
      border:1px solid var(--sg-border);
      border-radius:24px;
      padding:30px;
      box-shadow:0 14px 34px rgba(7,27,46,.05);
    }

    .sg-info-card h2,
    .sg-help-card h2{
      margin:0 0 14px;
      color:var(--sg-blue-dark);
      font-size:34px;
      line-height:1.08;
      letter-spacing:-.04em;
    }

    .sg-info-card p,
    .sg-help-card p{
      margin:0 0 18px;
      color:var(--sg-text-soft);
      font-size:16px;
    }

    .sg-benefits{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:14px;
      margin-top:18px;
    }

    .sg-benefit{
      padding:16px 16px;
      border-radius:16px;
      background:linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
      border:1px solid rgba(11,79,132,.08);
    }

    .sg-benefit h3{
      margin:0 0 4px;
      font-size:18px;
      color:var(--sg-blue-dark);
    }

    .sg-benefit p{
      margin:0;
      font-size:14px;
    }

    .sg-help-list{
      list-style:none;
      padding:0;
      margin:18px 0 0;
      display:grid;
      gap:12px;
    }

    .sg-help-list li a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:16px 18px;
      border-radius:16px;
      background:#f7fbfe;
      border:1px solid rgba(11,79,132,.08);
      color:var(--sg-text);
      font-weight:700;
    }

    /* FOOTER */
    .sg-footer{
      margin-top:38px;
      background:linear-gradient(180deg, var(--sg-blue-dark) 0%, #08395f 100%);
      color:#fff;
      padding:34px 0;
    }

    .sg-footer__inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
    }

    .sg-footer__brand{
      font-size:22px;
      font-weight:800;
      letter-spacing:-.02em;
    }

    .sg-footer p{
      margin:6px 0 0;
      color:rgba(255,255,255,.78);
      font-size:14px;
    }

    .sg-footer__nav{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    .sg-footer__nav a{
      color:rgba(255,255,255,.88);
      font-size:14px;
      font-weight:700;
    }

    /* RESPONSIVE */
    @media (max-width: 1180px){
      .sg-hero__inner{
        grid-template-columns:1fr;
        min-height:auto;
        padding:42px 0 100px;
      }

      .sg-hero__card{
        justify-self:start;
        max-width:520px;
      }

      .sg-systems-grid{
        grid-template-columns:repeat(2, 1fr);
      }

      .sg-trust-grid{
        grid-template-columns:repeat(2, 1fr);
      }

      .sg-info-grid{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 860px){
      .sg-header__inner{
        min-height:auto;
        padding:16px 0;
        align-items:flex-start;
        flex-direction:column;
      }

      .sg-nav{
        width:100%;
        justify-content:flex-start;
      }

      .sg-intro__card{
        padding:28px 24px;
      }

      .sg-estimator-head{
        flex-direction:column;
        align-items:flex-start;
      }

      .sg-estimator-body{
        grid-template-columns:1fr;
      }

      .sg-estimator-side{
        border-right:none;
        border-bottom:1px solid rgba(0,0,0,.05);
      }

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

      .sg-benefits{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 640px){
      .container{
        width:min(var(--container), calc(100% - 24px));
      }

      .sg-hero__inner{
        padding:28px 0 90px;
      }

      .sg-hero h1{
        font-size:40px;
      }

      .sg-hero__card{
        padding:22px;
        border-radius:22px;
      }

      .sg-intro__card h2,
      .sg-section-head h2,
      .sg-info-card h2,
      .sg-help-card h2,
      .sg-estimator-head h2{
        font-size:28px;
      }

      .sg-trust-grid,
      .sg-systems-grid{
        grid-template-columns:1fr;
      }

      .sg-stepper{
        justify-content:flex-start;
      }

      .sg-price{
        font-size:30px;
      }
    }
    
    
    
    
    .sg-field.is-disabled{
  opacity:.45;
  pointer-events:none;
}

.sg-field select:disabled,
.sg-field input:disabled{
  background:#f1f4f7;
  color:#7b8794;
  cursor:not-allowed;
}

.sg-estimator-body--mirrored{
  display:grid !important;
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr) !important;
}

.sg-estimator-body--mirrored > .sg-estimator-main{
  order:1;
  padding:28px;
}

.sg-estimator-body--mirrored > .sg-estimator-visual{
  order:2;
  padding:28px;
  border-left:1px solid rgba(0,0,0,.05);
  border-right:none;
  background:linear-gradient(180deg,#f8fbfe 0%,#eef5fa 100%);
  display:flex;
  flex-direction:column;
  gap:18px;
}

.sg-estimator-visual{
  min-width:0;
}

.sg-visual-canvas{
  min-height:320px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(11,79,132,.08);
  box-shadow:0 12px 28px rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

@media (max-width: 980px){
  .sg-estimator-body--mirrored{
    grid-template-columns:1fr !important;
  }

  .sg-estimator-body--mirrored > .sg-estimator-main{
    order:1;
  }

  .sg-estimator-body--mirrored > .sg-estimator-visual{
    order:2;
    border-left:none;
    border-top:1px solid rgba(0,0,0,.05);
  }
}


/*  NEW */

/* =========================================
   ESTIMATOR - NEW 3 COLUMN LAYOUT
   SELECTS | IMAGE | INPUTS
   ========================================= */

.sg-estimator{
  padding:28px 0 36px;
}

.sg-estimator-shell{
  background:#fff;
  border:1px solid var(--sg-border);
  border-radius:28px;
  box-shadow:0 22px 60px rgba(9,32,54,.09);
  overflow:hidden;
}

.sg-estimator-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 28px;
  border-bottom:1px solid rgba(0,0,0,.05);
  background:linear-gradient(180deg, #fdfefe 0%, #f5f9fc 100%);
}

.sg-estimator-head h2{
  margin:0 0 5px;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.03em;
  color:#474747;
  text-align:center;
}

.sg-estimator-head p{
  margin:0;
  color:#474747;
  font-size:19px;
  text-align:center;
}

.sg-stepper{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sg-step{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#eef6fb;
  color:var(--sg-blue-dark);
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.sg-step__num{
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--sg-blue);
  color:#fff;
  font-size:12px;
  font-weight:800;
  flex:0 0 auto;
}

/* MAIN 3 COLUMN BODY */
.sg-estimator-body--quote{
  display:grid;
  grid-template-columns:minmax(340px, 1fr) 320px minmax(320px, 1fr);
  gap:34px;
  align-items: start;
  padding:30px 28px 32px;
  background:linear-gradient(180deg, #f8fbfe 0%, #eef5fa 100%);
}

.sg-estimator-selects,
.sg-estimator-image,
.sg-estimator-summary{
  min-width:0;
    align-self: start;
}

/* =========================================
   LEFT COLUMN - SELECTS
   ========================================= */

.sg-estimator-selects{
  display:grid;
  gap:14px;
}

.sg-quote-row{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr);
  align-items:center;
  gap:14px;
}

.sg-quote-row label{
  margin:0;
  font-size:14px;
  font-weight:400;
  color:#333;
  letter-spacing:0;
  text-transform:none;
  line-height:1.3;
}

.sg-quote-row select{
  width:100%;
  height:32px;
   box-sizing: border-box;
  border:1px solid rgba(11,79,132,.15);
  border-radius:999px;
  padding:0 48px 0 16px;
  font-size:15px;
  color:#fff;
  background-color:#148cc9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'><path fill='white' d='M1.9 1.4 9 8.5l7.1-7.1 1.4 1.4L9 11.3.5 2.8z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
  outline:none;
  cursor:pointer;
}

/* hide row properly */
.sg-quote-row--hidden{
  display: none;
}

.sg-quote-row select:focus{
  border-color:var(--sg-blue);
  box-shadow:0 0 0 4px rgba(0,99,166,.10), inset 0 -2px 0 rgba(0,0,0,.12);
}

.sg-quote-row select:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.sg-quote-row select option{
  color:#16202A;
  background:#fff;
}

.sg-quote-row--stack{
  grid-template-columns:1fr;
  gap:8px;
}

.sg-quote-row-main{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr);
  align-items:center;
  gap:14px;
}

.config-info{
  margin-left:134px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(11,79,132,.10);
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.config-info strong{
  display:block;
  margin:0 0 4px;
  color:var(--sg-blue-dark);
  font-size:13px;
  line-height:1.3;
}

.config-info p{
  margin:0;
  font-size:13px;
  color:var(--sg-text-soft);
  line-height:1.5;
}

/* =========================================
   MIDDLE COLUMN - IMAGE
   ========================================= */

.sg-estimator-image{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.sg-visual-disc{
  width:320px;
  aspect-ratio:1 / 1;
    border-radius: 24px; /* instead of 50% */
  overflow:hidden; /* 🔥 THIS is the magic */
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.96) 0%, rgba(230,238,244,.98) 58%, rgba(205,216,224,1) 100%);
}

.sg-visual-disc img{
  width:100%;
  height:100%;
  object-fit:cover; /* fills the circle nicely */
  display:block;
}


.sg-visual-disc .sg-frame{
  width:100%;
  height:100%;
  max-width:220px;
  max-height:220px;
  margin:0 auto;
}

.sg-visual-caption{
  margin-top:18px;
  max-width:320px;
}

.sg-visual-caption strong{
  display:block;
  margin:0 0 6px;
  font-size:21px;
  color:var(--sg-blue-dark);
  letter-spacing:-.02em;
  line-height:1.2;
}

.sg-visual-caption p{
  margin:0;
  font-size:14px;
  color:var(--sg-text-soft);
  line-height:1.5;
}

/* Optional helper bits if retained */
.sg-visual-notes{
  margin-top:16px;
  display:grid;
  gap:10px;
  width:100%;
  max-width:320px;
}

.sg-visual-note{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(11,79,132,.08);
  font-size:13px;
  color:var(--sg-text);
  text-align:left;
}

.sg-visual-helper{
  margin-top:12px;
  max-width:320px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(11,79,132,.08);
}

.sg-visual-helper p{
  margin:0;
  font-size:13px;
  color:var(--sg-text-soft);
  line-height:1.5;
}

/* =========================================
   RIGHT COLUMN - INPUTS / PRICE / ACTIONS
   ========================================= */

.sg-estimator-summary{
  display:grid;
  gap:16px;
}

.sg-quote-dims{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.sg-field--compact,
.sg-field--reference{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sg-field--compact label,
.sg-field--reference label{
  font-size:13px;
  font-weight:800;
  color:var(--sg-blue-dark);
  letter-spacing:.02em;
  text-transform:none;
  line-height:1.3;
}

.sg-field--compact input,
.sg-field--reference input{
  width:100%;
  height:52px;
  border:1px solid rgba(11,79,132,.15);
  border-radius:14px;
  padding:0 16px;
  font-size:15px;
  color:var(--sg-text);
  background:#fff;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.sg-field--compact input:focus,
.sg-field--reference input:focus{
  border-color:var(--sg-blue);
  box-shadow:0 0 0 4px rgba(0,99,166,.10);
}

.sg-field--compact input:disabled,
.sg-field--reference input:disabled{
  background:#f1f4f7;
  color:#7b8794;
  cursor:not-allowed;
}

.sg-price-panel{
  padding:18px 18px 16px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--sg-border);
  box-shadow:0 10px 24px rgba(0,0,0,.04);
  text-align:center;
}

.sg-price-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.sg-price-label{
  font-size:13px;
  font-weight:800;
  color:var(--sg-text-soft);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sg-price{
  font-size:34px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--sg-blue-dark);
}

.sg-price-sub{
  margin:8px 0 0;
  font-size:14px;
  color:var(--sg-text-soft);
  line-height:1.5;
}

.sg-estimator-actions--stack{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:0;
  padding-top:0;
  border-top:none;
}

.sg-estimator-actions--stack .sg-btn{
  width:100%;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px){
  .sg-estimator-body--quote{
    grid-template-columns:1fr;
    gap:28px;
  }

  .sg-estimator-image{
    order:2;
  }

  .sg-estimator-summary{
    order:3;
  }
}

@media (max-width: 860px){
  .sg-estimator-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .sg-stepper{
    justify-content:flex-start;
  }
}

@media (max-width: 700px) {

  .sg-estimator-selects {
    width: 100%;
  }

  .sg-quote-row,
  .sg-quote-row-main {
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    width: 100%;
  }

  .sg-quote-row--stack {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sg-quote-row label,
  .sg-quote-row-main label {
    margin: 0;
    min-width: 0;
  }

  .sg-quote-row select,
  .sg-quote-row-main select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .config-info{
    margin-left:0;
  }

  .sg-quote-dims{
    grid-template-columns:1fr;
  }

  .sg-visual-disc{
    width:min(100%, 280px);
  }

  .sg-estimator-body--quote{
    padding:22px 18px 24px;
  }

}

@media (max-width: 640px){
  .sg-estimator-head h2{
    font-size:28px;
  }

  .sg-price{
    font-size:30px;
  }
}


/* =========================================
   CART BUTTON (AMAZON STYLE)
   ========================================= */

.sg-btn--cart{
  background: #FFD814 !important;
  color: #111 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  border: none;
}

.sg-btn--cart:hover{
  background: #F7CA00 !important;
  transform: translateY(-1px);
}

.sg-btn--cart:active{
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}


/* =========================================
   RIGHT COLUMN - ECOMMERCE STYLE REFRESH
   ========================================= */

.sg-estimator-summary{
  display:grid;
  gap:14px;
  align-content:start;
}

.sg-quote-dims{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.sg-field--compact,
.sg-field--reference{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sg-field--compact label,
.sg-field--reference label{
  font-size:13px;
  font-weight:800;
  color:var(--sg-blue-dark);
  letter-spacing:.01em;
  text-transform:none;
  line-height:1.3;
  text-align:center;
}

.sg-field--compact input,
.sg-field--reference input{
  width:100%;
  height:32px;
  border:2px solid #2b2b2b;
  border-radius:10px;
  padding:0 14px;
  font-size:15px;
  color:#1a1a1a;
  background:#fff;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.sg-field--compact input:focus,
.sg-field--reference input:focus{
  border-color:var(--sg-blue);
  box-shadow:0 0 0 4px rgba(0,99,166,.10);
}

.sg-field--compact input:disabled,
.sg-field--reference input:disabled{
  background:#fff;
  color:#6f7982;
  cursor:not-allowed;
  opacity:1;
}

/* reference field slightly shallower visual spacing */
.sg-field--reference{
  gap:6px;
}

/* PRICE AREA */
.sg-price-panel{
  padding:10px 4px 2px;
  border:none;
  box-shadow:none;
  background:transparent;
  text-align:center;
}

.sg-price-was{
  position:relative;
  display:none;
  overflow:hidden;

  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
  color:#8a8a8a;
  font-style:italic;
  font-weight:400;
}

.sg-price-was.show{
  display:inline-block;
}

.sg-price-was::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:2px;
  background:#d40000;
  transform:rotate(-8deg);
  transform-origin:center;
}

.sg-price-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:18px;
  margin:0 auto;
  max-width:280px;
}

.sg-price-main{
  text-align:left;
}

.sg-price-prefix{
  display:inline;
  font-size:18px;
  line-height:1.2;
  color:#111;
  font-style:italic;
  font-weight:500;
}

.sg-price{
  display:inline;
  font-size:22px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  color:#111;
}

.sg-price-vat{
  font-size:16px;
  line-height:1.2;
  color:#111;
  font-style:italic;
  font-weight:500;
  white-space:nowrap;
}

.sg-price-sub{
  margin:8px 0 0;
  font-size:15px;
  line-height:1.45;
  color:#666;
}

/* CTA AREA */
.sg-estimator-actions--stack{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:2px;
  padding-top:0;
  border-top:none;
}

.sg-estimator-actions--stack .sg-btn{
  width:100%;
}

.sg-estimator-actions--stack .sg-btn--cart{
  min-height:46px;
  border-radius:999px;
  font-size:15px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

/* PAYMENT ICONS */
.sg-payment-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:0;
}

.sg-payment-row img{
  height:24px;
  width:auto;
  display:block;
}

/* DELIVERY / TRUST */
.sg-summary-meta{
  display:grid;
  gap:10px;
  margin-top:6px;
  text-align:center;
}

.sg-delivery-note{
  margin:0;
  font-size:15px;
  color:#555;
  line-height:1.4;
}

.sg-trust-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:14px;
  color:#333;
}

.sg-trust-line a{
  color:#1f1f1f;
  text-decoration:underline;
  text-underline-offset:2px;
}

.sg-trust-stars{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.sg-trust-star{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#00b67a;
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:700;
}

/* MOBILE */
@media (max-width: 700px){
  .sg-price-row{
    grid-template-columns:1fr;
    gap:6px;
    max-width:none;
  }

  .sg-price-main{
    text-align:center;
  }
}



.sg-resume-bar {
  margin: 0 0 0px;
  padding: 16px 18px;
  background: #f7f9fc;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
}

.sg-resume-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.sg-resume-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sg-resume-controls input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #c7d2de;
  border-radius: 10px;
  font-size: 15px;
}

.sg-resume-help {
  margin: 8px 0 0;
  font-size: 13px;
  color: #5f6b7a;
}

@media (max-width: 640px) {
  .sg-resume-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .sg-resume-controls button {
    width: 100%;
  }
}






.sg-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* SEARCH BAR */
.sg-header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.sg-header-search__label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
}

.sg-header-search__input {
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #d0d7e2;
  width: 260px;
}

.sg-header-search__input:focus {
  outline: none;
  border-color: #0063A6;
}

.sg-header-search__btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #0063A6;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* NAV tidy */
.sg-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 900px) {
  .sg-header__inner {
    flex-wrap: wrap;
  }

  .sg-header-search {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .sg-header-search__input {
    flex: 1;
    width: auto;
  }

  .sg-nav {
    margin-left: auto;
  }
}



.sg-validation-messages{
  margin:0 20px;
}

.val-group{
  border-radius:14px;
  padding:14px 16px;
  margin:0 0 12px;
  font-size:14px;
  line-height:1.5;
}

.val-group strong{
  display:block;
  margin-bottom:8px;
  font-size:14px;
}

.val-group ul{
  margin:0;
  padding-left:18px;
}

.val-group li{
  margin:0 0 4px;
}

.val-group--error{
  background:#fff1f1;
  border:1px solid #f0b9b9;
  color:#8c1d1d;
}

.val-group--warning{
  background:#fff8e8;
  border:1px solid #ecd39a;
  color:#7a5a00;
}

.val-group--info{
  background:#eef6ff;
  border:1px solid #c6dcf7;
  color:#1a4f8b;
}


.sg-basket-link{
  position:relative;
  display:inline-block; /* IMPORTANT */
  padding-right:10px;   /* gives space for badge */
}

.sg-basket-count{
  position:absolute;
  top:-6px;
  right:-12px;

  min-width:18px;
  height:18px;

  padding:0 5px;
  border-radius:50%; /* THIS makes it a circle */

  background:#e53935;
  color:#fff;

  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;

  display:inline-block; /* IMPORTANT */
}






/* =========================
   TECHNICAL MANUALS GRID
   ========================= */

.tech-guides{
    padding:60px 20px;
}

.tech-guides .section-heading{
    text-align:center;
    max-width:800px;
    margin:0 auto 40px;
}

.tech-guides .section-heading h2{
    margin-bottom:10px;
}

.tech-guides .section-heading p{
    color:#666;
}

/* =========================
   GRID
   ========================= */

.guide-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

/* =========================
   CARD
   ========================= */

.guide-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    padding:20px;
    text-decoration:none;
    color:#333;
    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;

    transition:all .25s ease;
}

.guide-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    border-color:#1f3d6d;
}

/* =========================
   IMAGE
   ========================= */

.guide-icon{
    margin-bottom:15px;
}

.guide-icon img{
    width:90px;
    height:90px;
    object-fit:contain;
    display:block;
}

/* =========================
   TITLE
   ========================= */

.guide-card h3{
    margin:0 0 10px;
    font-size:1rem;
    line-height:1.3;
    color:#1f3d6d;
    min-height:42px;
}

/* =========================
   DESCRIPTION
   ========================= */

.guide-card p{
    margin:0 0 15px;
    font-size:0.9rem;
    color:#666;
    line-height:1.4;
    flex-grow:1;
}

/* =========================
   PDF INFO
   ========================= */

.guide-meta{
    display:block;
    font-size:0.85rem;
    color:#999;
    margin-bottom:15px;
}

/* =========================
   BUTTON
   ========================= */

.guide-btn{
    display:inline-block;
    background:#1f3d6d;
    color:#fff;
    padding:10px 16px;
    border-radius:6px;
    font-size:0.9rem;
    font-weight:600;
    transition:.2s;
}

.guide-card:hover .guide-btn{
    background:#29528f;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width:1200px){

    .guide-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:768px){

    .guide-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .guide-card{
        padding:15px;
    }

    .guide-icon img{
        width:70px;
        height:70px;
    }

}

@media (max-width:480px){

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

}



@media (max-width:768px){

    .product-profile{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .profile-card{
        padding: 10px;
    }

    .profile-img{
        width: 100%;
        height: auto;
        display: block;
    }

}






.lifestyle-strip{
    background:#e9eaea;
    padding:30px 0;
    overflow:hidden;
}

.lifestyle-track{
    max-width:1240px;
    margin:0 auto;
    display:flex;
    gap:18px;
    justify-content:center;
    align-items:center;
    padding:0 20px;
}

.lifestyle-track img{
    height:300px;
    width:auto;
    display:block;
    border-radius:14px;
    object-fit:cover;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

@media (max-width:900px){
    .lifestyle-track{
        overflow-x:auto;
        justify-content:flex-start;
        padding-bottom:10px;
    }

    .lifestyle-track img{
        height:160px;
        flex-shrink:0;
    }
}