:root{
  --navy:#0E2036;
  --navy-2:#153755;
  --teal:#0E6F63;
  --teal-light:#12897A;
  --brass:#B8873A;
  --brass-light:#D9AE63;
  --paper:#F5F6F0;
  --paper-2:#ECEEE3;
  --ink:#182A32;
  --slate:#5B6B70;
  --line:#D9DCCE;
  --white:#FFFFFF;
  --shadow:0 12px 32px rgba(14,32,54,0.10);
  --radius:2px;
}

*,*::before,*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'IBM Plex Sans',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body.pes-modal-open{
  overflow:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  color:var(--navy);
  line-height:1.15;
  margin:0;
  font-weight:600;
}

h5,h6{
  margin-top:0;
}

p{
  margin:0;
}

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

ul{
  list-style:none;
  margin:0;
  padding:0;
}

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

button{
  font-family:inherit;
  cursor:pointer;
}

input,
select,
textarea{
  font-family:inherit;
}

.mono{
  font-family:'IBM Plex Mono',monospace;
}

.container{
  max-width:1220px;
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}

.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--brass);
  display:inline-block;
}

.hero-eyebrow,
.dark-eyebrow{
  color:var(--brass-light);
}

.section{
  padding:96px 0;
}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}

.section-head h2{
  font-size:clamp(28px,3.4vw,40px);
  margin-top:14px;
}

.section-head p{
  margin-top:16px;
  color:var(--slate);
  font-size:16.5px;
}

.section-alt{
  background:var(--paper-2);
}

.section-dark{
  background:var(--navy);
  color:#DCE4E6;
}

.section-dark h2,
.section-dark h3,
.section-dark h4{
  color:#fff;
}

.section-dark .section-head p{
  color:#9FB0B8;
}


/* Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:all .2s ease;
  white-space:nowrap;
}

.btn-primary{
  background:var(--teal);
  color:#fff;
}

.btn-primary:hover{
  background:var(--teal-light);
}

.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.4);
  color:inherit;
}

.btn-outline:hover{
  border-color:var(--brass);
  color:var(--brass);
}

.header-export-btn{
  border-color:var(--line);
  color:var(--navy);
}

.btn-navy{
  background:var(--navy);
  color:#fff;
}

.btn-navy:hover{
  background:var(--navy-2);
}

.btn-brass{
  background:var(--brass);
  color:#1a1305;
}

.btn-brass:hover{
  background:var(--brass-light);
}

.btn-sm{
  padding:10px 18px;
  font-size:13px;
}

.btn-block{
  width:100%;
}


/* Topbar */

.topbar{
  background:var(--navy);
  color:#B9C6CB;
  font-size:12.5px;
}

.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:9px;
  padding-bottom:9px;
  gap:20px;
  flex-wrap:wrap;
}

.topbar .badges{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.topbar .badges span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.topbar .badges span::before{
  content:"";
  width:5px;
  height:5px;
  background:var(--brass-light);
  border-radius:50%;
  display:inline-block;
}

.topbar .contact a{
  color:#fff;
  font-weight:600;
}

.topbar .contact{
  font-family:'IBM Plex Mono',monospace;
}


/* Header */

header.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(245,246,240,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-mark{
  width:42px;
  height:42px;
  flex-shrink:0;
}

.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.logo-text .name{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:19px;
  color:var(--navy);
}

.logo-text .sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
  margin-top:3px;
}

nav.primary-nav ul{
  display:flex;
  gap:32px;
}

nav.primary-nav a{
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  position:relative;
  padding:4px 0;
}

nav.primary-nav a:hover{
  color:var(--teal);
}

.header-cta{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  padding:6px;
}

.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--navy);
  margin:5px 0;
}


/* Mobile nav */

.mobile-nav{
  display:none;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.mobile-nav ul{
  display:flex;
  flex-direction:column;
  padding:18px 28px;
  gap:16px;
}

.mobile-nav a{
  font-weight:500;
}


/* Hero */

.hero{
  position:relative;
  padding:76px 0 90px;
  background:
    radial-gradient(
      1100px 500px at 85% -10%,
      rgba(14,111,99,.16),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #0E2036 0%,
      #153755 100%
    );
  color:#fff;
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );
  background-size:44px 44px;
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:start;
}

.hero h1{
  font-size:clamp(34px,4.6vw,54px);
  color:#fff;
  max-width:660px;
  margin-top:16px;
}

.hero h1 em{
  color:var(--brass-light);
  font-style:normal;
}

.hero .lede{
  margin-top:22px;
  max-width:560px;
  color:#B9C9CE;
  font-size:17px;
}

.hero-search{
  margin-top:34px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:10px;
  border-radius:var(--radius);
}

.hero-search select,
.hero-search input{
  width:100%;
  padding:12px 14px;
  background:rgba(255,255,255,.94);
  border:1px solid transparent;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:14px;
  color:var(--ink);
  border-radius:2px;
}

.hero-callouts{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.callout{
  border-top:2px solid var(--brass);
  padding-top:14px;
}

.callout .num{
  font-family:'Fraunces',serif;
  font-size:22px;
  color:#fff;
  font-weight:600;
}

.callout p{
  color:#9FB0B8;
  font-size:13px;
  margin-top:6px;
  line-height:1.5;
}


/* Stamps */

.stamp-row{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  align-items:center;
}

.stamp{
  width:96px;
  height:96px;
  flex-shrink:0;
}

.stamp .ring{
  fill:none;
  stroke:rgba(255,255,255,.55);
  stroke-width:1;
  stroke-dasharray:2 4;
}

.stamp .ring2{
  fill:none;
  stroke:var(--brass-light);
  stroke-width:1.1;
}

.stamp text{
  fill:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:7.4px;
  letter-spacing:1.5px;
}

.stamp .center-icon{
  stroke:var(--brass-light);
}

.stamp.light .ring{
  stroke:rgba(20,40,50,.35);
}

.stamp.light text{
  fill:var(--navy);
}

.stamp.light .center-icon{
  stroke:var(--teal);
}


/* Hero card */

.hero-card{
  background:#fff;
  color:var(--ink);
  padding:28px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
}

.hero-card h4{
  font-size:15px;
  color:var(--navy);
  margin-bottom:16px;
}

.hero-card .stat-line{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px dashed var(--line);
}

.hero-card .stat-line:last-of-type{
  border-bottom:none;
}

.hero-card .stat-line .label{
  font-size:13px;
  color:var(--slate);
}

.hero-card .stat-line .value{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  color:var(--navy);
  font-size:15px;
}


/* Stats */

.stats-strip{
  background:var(--brass);
  color:#241a05;
}

.stats-strip .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:34px 28px;
}

.stats-strip .stat{
  text-align:center;
  border-left:1px solid rgba(0,0,0,.14);
  padding:0 12px;
}

.stats-strip .stat:first-child{
  border-left:none;
}

.stats-strip .stat .n{
  font-family:'Fraunces',serif;
  font-size:30px;
  font-weight:700;
}

.stats-strip .stat .l{
  font-size:12px;
  margin-top:6px;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace;
}


/* Product */

.filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:34px;
}

.filter-btn{
  padding:9px 16px;
  border:1px solid var(--line);
  background:#fff;
  font-size:13px;
  font-weight:500;
  color:var(--slate);
  border-radius:20px;
  transition:all .15s ease;
}

.filter-btn:hover{
  border-color:var(--teal);
  color:var(--teal);
}

.filter-btn.active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

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

.product-card{
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
  cursor:pointer;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.product-media{
  height:150px;
  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-media .form-tag{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.3);
  z-index:2;
}

/* Real product photo pulled from the database (image_id).
   Falls back to the navy gradient background when a product
   has no image on file. */
.product-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.product-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.product-body .cat{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--teal);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.product-body h4{
  font-size:17px;
  color:var(--navy);
}

.product-body .generic{
  font-size:13px;
  color:var(--slate);
}

.product-meta{
  display:flex;
  justify-content:space-between;
  border-top:1px dashed var(--line);
  padding-top:12px;
  margin-top:auto;
  font-size:12.5px;
}

.product-meta div span{
  display:block;
  color:var(--slate);
  font-size:11px;
  margin-bottom:3px;
}

.product-meta div b{
  font-family:'IBM Plex Mono',monospace;
  color:var(--navy);
  font-weight:600;
}

.product-body .view-link{
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:6px;
}

.product-body .view-link:hover{
  color:var(--teal);
}

.center-button{
  text-align:center;
  margin-top:40px;
}

.catalogue-count{
  color:var(--slate);
}


/* Supply chain */

.supply-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.route-diagram{
  background:var(--navy-2);
  padding:34px;
  border:1px solid rgba(255,255,255,.1);
}

.route-line{
  display:flex;
  align-items:center;
  gap:0;
  margin:26px 0;
}

.route-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:84px;
}

.route-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--brass-light);
  border:2px solid rgba(255,255,255,.4);
}

.white-dot{
  background:#fff;
}

.route-node .rlabel{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:#DCE4E6;
  text-align:center;
  line-height:1.3;
}

.route-dash{
  flex:1;
  height:0;
  border-top:1.6px dashed rgba(255,255,255,.4);
  position:relative;
  margin:0 6px;
  top:-13px;
}

.cap-list{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.cap-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 18px;
    align-items: start;
    margin-bottom: 28px;
}

.cap-item .idx {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D9AE63;
    color: #D9AE63;
    font-family: "Courier New", monospace;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.cap-item h5 {
    margin: 0 0 6px;
    color: #FFFFFF;
}

.cap-item p {
    margin: 0;
    color: #B8C9D8;
    line-height: 1.65;
}

.dark-lede {
    color: #B8C9D8;
    line-height: 1.7;
}

.route-port-list{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:8px;
  padding-top:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.route-port-list div{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#C4D0D3;
}

.route-value{
  color:#fff;
}


/* Calculator */

.calc-panel{
  background:#fff;
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1.1fr .9fr;
}

.calc-form{
  padding:44px;
}

.calc-result{
  background:var(--navy);
  color:#fff;
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.field{
  margin-bottom:20px;
}

.field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--slate);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.field select,
.field input,
.field textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  font-size:14.5px;
  font-family:'IBM Plex Sans',sans-serif;
  background:var(--paper);
}

.field select:focus,
.field input:focus,
.field textarea:focus{
  outline:2px solid var(--teal);
  outline-offset:-1px;
}

.calc-result .tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--brass-light);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.calc-price{
  font-family:'Fraunces',serif;
  font-size:44px;
  font-weight:700;
  margin:14px 0 8px;
}

.calc-note{
  font-size:13px;
  color:#9FB0B8;
  line-height:1.6;
  margin-bottom:26px;
}

.calc-breakdown{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:24px;
}

.calc-breakdown div{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#C4D0D3;
}

.calc-breakdown b{
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
}


/* Quality */

.steps-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  position:relative;
}

.steps-row::before{
  content:"";
  position:absolute;
  top:26px;
  left:5%;
  right:5%;
  height:0;
  border-top:1.5px dashed var(--line);
  z-index:0;
}

.step-item{
  position:relative;
  z-index:1;
  padding:0 14px;
  text-align:left;
}

.step-num{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--teal);
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  font-size:16px;
  margin-bottom:20px;
}

.step-item h5{
  font-size:15px;
  color:var(--navy);
  margin-bottom:8px;
  line-height:1.3;
}

.step-item p{
  font-size:13px;
  color:var(--slate);
}


/* Testimonials */

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

.testi-card{
  background:#fff;
  border:1px solid var(--line);
  padding:30px;
  position:relative;
}

.testi-card .quote-mark{
  font-family:'Fraunces',serif;
  font-size:52px;
  color:var(--brass);
  line-height:1;
  opacity:.5;
}

.testi-card p.qt{
  font-size:15px;
  color:var(--ink);
  margin:14px 0 22px;
  line-height:1.65;
}

.testi-person{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
  padding-top:14px;
}

.testi-person b{
  font-size:14px;
  color:var(--navy);
}

.testi-person span{
  font-size:12.5px;
  color:var(--slate);
  margin-top:3px;
}

.testi-person .flag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--teal);
  margin-top:6px;
}


/* Regulatory */

.reg-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:56px;
}

.reg-card{
  padding:28px;
  border:1px solid var(--line);
  background:#fff;
}

.reg-card .stamp{
  margin-bottom:16px;
}

.reg-card h5{
  font-size:16px;
  color:var(--navy);
  margin-bottom:10px;
}

.reg-card p{
  font-size:13.6px;
  color:var(--slate);
}

.table-title{
  margin-bottom:18px;
  font-size:17px;
}

table.doc-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:13.6px;
}

table.doc-table th{
  text-align:left;
  padding:14px 16px;
  background:var(--navy);
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
}

table.doc-table td{
  padding:16px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}

table.doc-table tr:last-child td{
  border-bottom:none;
}

.status-pill{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  padding:4px 10px;
  background:rgba(14,111,99,.1);
  color:var(--teal);
  display:inline-block;
}

.doc-link{
  color:var(--navy);
  font-weight:600;
  font-size:13px;
}

.doc-link:hover{
  color:var(--teal);
}


/* Process */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.process-card{
  border-top:3px solid var(--brass);
  padding-top:20px;
}

.process-card .pnum{
  font-family:'IBM Plex Mono',monospace;
  color:var(--brass);
  font-size:13px;
  margin-bottom:10px;
}

.process-card h5{
  font-size:16.5px;
  color:var(--navy);
  margin-bottom:10px;
}

.process-card p{
  font-size:13.6px;
  color:var(--slate);
}


/* About */

.about-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
  margin-top:20px;
  margin-bottom:64px;
}

.about-top > div > h2{
  font-size:clamp(26px,3vw,36px);
}

.about-lede{
  margin-top:16px;
  color:var(--slate);
  font-size:15.5px;
}

.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:28px;
}

.about-stats .astat{
  border-left:2px solid var(--brass);
  padding-left:14px;
}

.about-stats .astat .n{
  font-family:'Fraunces',serif;
  font-size:26px;
  color:var(--navy);
  font-weight:700;
}

.about-stats .astat .l{
  font-size:12.4px;
  color:var(--slate);
  margin-top:4px;
}

.about-model{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.model-item{
  display:flex;
  gap:18px;
}

.model-item .idx{
  font-family:'Fraunces',serif;
  font-size:26px;
  color:var(--brass);
  font-weight:600;
  flex-shrink:0;
  width:40px;
}

.model-item h5{
  font-size:16px;
  color:var(--navy);
  margin-bottom:6px;
}

.model-item p{
  font-size:14px;
  color:var(--slate);
}

.about-secondary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:20px;
}

.info-block{
  background:#fff;
  border:1px solid var(--line);
  padding:28px;
}

.info-block h5{
  font-size:15.5px;
  color:var(--navy);
  margin-bottom:10px;
}

.info-block p{
  font-size:13.8px;
  color:var(--slate);
}

.audit-cta{
  margin-top:56px;
  background:var(--navy);
  color:#fff;
  padding:44px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}

.audit-cta h4{
  color:#fff;
  font-size:22px;
  max-width:480px;
}


/* Contact */

.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
}

.contact-info h2{
  margin-top:14px;
}

.contact-info .contact-intro{
  margin-top:16px;
  color:#C4D0D3;
  font-size:14.5px;
  line-height:1.7;
  margin-bottom:26px;
}

.contact-info h5{
  font-size:14px;
  color:var(--brass);
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:10px;
  margin-top:30px;
}

.contact-info p{
  color:#C4D0D3;
  font-size:14.5px;
  line-height:1.7;
  margin-bottom:26px;
}

.contact-info a{
  color:#fff;
  font-weight:600;
}

.contact-form{
  background:#fff;
  padding:36px;
  color:var(--ink);
}

.contact-form h4{
  margin-bottom:6px;
}

.form-subtitle{
  color:var(--slate);
  font-size:13.6px;
  margin-bottom:24px;
}

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

.contact-form .field label{
  color:var(--slate);
}


/* Footer */

footer{
  background:var(--navy);
  color:#8FA0A6;
  padding:64px 0 26px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-grid h5{
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.footer-grid ul li{
  margin-bottom:10px;
  font-size:13.6px;
}

.footer-grid ul a:hover{
  color:var(--brass-light);
}

.footer-brand p{
  font-size:13.6px;
  line-height:1.7;
  margin-top:14px;
  max-width:320px;
}

.footer-name{
  color:#fff !important;
}

.footer-logo{
  width:36px;
  height:36px;
}

.footer-bottom{
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  flex-wrap:wrap;
  gap:10px;
}


/* Modal */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,30,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:20px;
  backdrop-filter:blur(2px);
}

.modal-overlay.open{
  display:flex;
}

.modal-box{
  background:#fff;
  max-width:760px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  position:relative;
  border-radius:var(--radius);
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  background:var(--paper);
  width:36px;
  height:36px;
  border:1px solid var(--line);
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.modal-close:hover{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}

.modal-hero{
  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );
  color:#fff;
  padding:38px;
}

.modal-hero .cat{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--brass-light);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.modal-hero h3{
  color:#fff;
  font-size:26px;
  margin:10px 0 6px;
}

.modal-hero .generic{
  color:#B9C9CE;
  font-size:14.5px;
}

.modal-body{
  padding:34px 38px 38px;
}

.modal-section{
  margin-bottom:26px;
}

.modal-section h6{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:10px;
}

.modal-section p{
  font-size:14.5px;
  color:var(--ink);
  line-height:1.7;
}

.spec-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.8px;
}

.spec-table td{
  padding:11px 0;
  border-bottom:1px solid var(--line);
}

.spec-table td:first-child{
  color:var(--slate);
  width:44%;
}

.spec-table td:last-child{
  color:var(--navy);
  font-weight:600;
  font-family:'IBM Plex Mono',monospace;
}

.modal-cta{
  display:flex;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}

.modal-back-btn{
  border-color:var(--line);
  color:var(--navy);
}

.rfq-modal .modal-box{
  max-width:600px;
}

.rfq-modal .modal-body{
  padding:38px;
}

.rfq-modal h3{
  margin-bottom:6px;
  font-size:22px;
}

.rfq-modal .sub{
  color:var(--slate);
  font-size:13.6px;
  margin-bottom:26px;
}

.modal-form-buttons{
  display:flex;
  gap:12px;
  margin-top:8px;
}

.modal-form-buttons .btn:first-child{
  flex:1;
}

.modal-form-buttons .btn:last-child{
  flex:2;
}


/* Toast */

.toast{
  position:fixed;
  bottom:26px;
  right:26px;
  background:var(--navy);
  color:#fff;
  padding:16px 22px;
  font-size:14px;
  border-left:3px solid var(--teal-light);
  box-shadow:var(--shadow);
  z-index:300;
  display:none;
  max-width:320px;
}

.toast.show{
  display:block;
  animation:toastin .25s ease;
}

@keyframes toastin{
  from{
    transform:translateY(10px);
    opacity:0;
  }

  to{
    transform:translateY(0);
    opacity:1;
  }
}



/* Reveal */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .6s ease,
    transform .6s ease;
}

.reveal.in{
  opacity:1;
  transform:translateY(0);
}


/* Responsive */

@media(max-width:980px){

  nav.primary-nav,
  .header-cta .header-export-btn{
    display:none;
  }

  .nav-toggle{
    display:block;
  }

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

  .hero-callouts{
    grid-template-columns:1fr;
  }

  .supply-grid,
  .about-top,
  .contact-grid,
  .calc-panel,
  .countries-wrap{
    grid-template-columns:1fr;
  }

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

  .stats-strip .container{
    grid-template-columns:repeat(2,1fr);
    row-gap:24px;
  }

  .steps-row{
    grid-template-columns:1fr;
    row-gap:28px;
  }

  .steps-row::before{
    display:none;
  }

  .reg-cards,
  .process-grid,
  .testi-grid{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    row-gap:32px;
  }

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

  .hero-search{
    grid-template-columns:1fr;
  }

  .route-line{
    flex-wrap:wrap;
    row-gap:30px;
  }

  .route-dash{
    min-width:50px;
  }

}


@media(max-width:640px){

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

  .section{
    padding:64px 0;
  }

  .topbar .badges{
    display:none;
  }

  .stats-strip .container{
    grid-template-columns:1fr 1fr;
  }

  .about-secondary{
    grid-template-columns:1fr;
  }

  .modal-form-buttons{
    flex-direction:column;
  }

  .modal-form-buttons .btn{
    width:100%;
  }

  .route-line{
    display:grid;
    grid-template-columns:1fr;
  }

  .route-dash{
    display:none;
  }

  .route-node{
    width:100%;
  }

}


@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

}
/* =========================================================
   WORDPRESS THEME OVERRIDE
   SAVITAR PUBLIC WEBSITE
   ========================================================= */

/* Remove the WordPress page title */
.wp-block-post-title {
    display: none !important;
}

/* Remove normal WordPress content width restrictions */
.entry-content,
.wp-block-post-content,
.is-layout-constrained,
.wp-block-group {
    max-width: none !important;
}

/* Remove WordPress content spacing */
.entry-content,
.wp-block-post-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* Make the shortcode output use the entire available width */
.entry-content > *,
.wp-block-post-content > * {
    max-width: none !important;
}

/* Remove default margins from the page */
main {
    margin: 0 !important;
    padding: 0 !important;
}

/* The Savitar website's own header should control the page */
.entry-content header,
.wp-block-post-content header {
    margin-top: 0 !important;
}
/* Hide WordPress theme header on the Savitar website */
header.wp-block-template-part {
    display: none !important;
}

/* Remove the blank space left by the theme header */
.wp-site-blocks > header + * {
    margin-top: 0 !important;
}
/* Remove the empty WordPress space above the website */
body {
    margin: 0 !important;
}

.wp-site-blocks {
    padding-top: 0 !important;
}

main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wp-block-post-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove spacing from the first element of our website */
.wp-block-post-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* =========================================================
   REMOVE WORDPRESS PAGE TITLE AREA
   ========================================================= */

/* Remove the spacer above "Home" */
main > .wp-block-group > .wp-block-spacer {
    display: none !important;
}

/* Remove WordPress-generated Home title */
main > .wp-block-group > .wp-block-post-title {
    display: none !important;
}
/* =========================================================
   SAVITAR HEALTHCARE — BRAND COLOUR SYSTEM
   ========================================================= */

:root {
    --savitar-orange: #FF8A00;
    --savitar-deep-orange: #FF4D00;
    --savitar-orange-gradient: linear-gradient(
        135deg,
        #FF9D00 0%,
        #FF4D00 100%
    );

    --savitar-black: #111111;
    --savitar-dark: #1A1A1A;

    --savitar-white: #FFFFFF;
    --savitar-soft: #FFF9F2;
    --savitar-light-orange: #FFF1DF;

    --savitar-border: #FFE0B2;
}
/* =========================================================
   GLOBAL SAVITAR HEALTHCARE BRAND OVERRIDE
   ========================================================= */

/* Main page */
body {
    color: var(--savitar-black);
    background: var(--savitar-white);
}

/* Dark navy sections → black */
section[style*="#0"],
section[style*="#1"],
.savitar-dark,
.hero,
.hero-section,
.dark-section {
    background-color: var(--savitar-black) !important;
}

/* Orange primary buttons */
button,
.btn,
.button,
.cta,
a.button,
a.btn {
    background: var(--savitar-orange-gradient) !important;
    border-color: var(--savitar-orange) !important;
    color: #FFFFFF !important;
}

/* Button hover */
button:hover,
.btn:hover,
.button:hover,
.cta:hover,
a.button:hover,
a.btn:hover {
    background: var(--savitar-deep-orange) !important;
}

/* Main headings */
h1,
h2,
h3 {
    color: var(--savitar-black);
}

/* Links */
a {
    color: var(--savitar-orange);
}

a:hover {
    color: var(--savitar-deep-orange);
}

/* Accent text */
.accent,
.eyebrow,
.label,
.section-label {
    color: var(--savitar-orange) !important;
}

/* Gold-looking borders → orange */
hr,
.border,
.card,
.box {
    border-color: var(--savitar-border);
}

/* Orange highlights */
.highlight,
.badge,
.tag {
    background: var(--savitar-light-orange) !important;
    color: var(--savitar-deep-orange) !important;
}
/* =========================================================
   REPLACE DEMO NAVY / GOLD / TEAL PALETTE
   ========================================================= */

/* Navy backgrounds */
[style*="#0B2239"],
[style*="#0b2239"],
[style*="#102A43"],
[style*="#102e4a"],
[style*="#0E2942"],
[style*="#123B5D"] {
    background-color: var(--savitar-black) !important;
}

/* Gold backgrounds */
[style*="#C08A32"],
[style*="#B88932"],
[style*="#D4A548"],
[style*="#D9A441"] {
    background: var(--savitar-orange-gradient) !important;
}

/* Teal */
[style*="#0D7D6F"],
[style*="#087F6E"],
[style*="#0F766E"] {
    background-color: var(--savitar-orange) !important;
}

/* Gold text */
[style*="#C08A32"],
[style*="#B88932"],
[style*="#D4A548"],
[style*="#D9A441"] {
    color: var(--savitar-orange) !important;
}
/* =========================================================
   SAVITAR NAVIGATION
   ========================================================= */

header,
.navbar,
nav {
    background: var(--savitar-white) !important;
    color: var(--savitar-black) !important;
}

nav a,
.navbar a,
header a {
    color: var(--savitar-black) !important;
}

nav a:hover,
.navbar a:hover,
header a:hover {
    color: var(--savitar-orange) !important;
}
/* =========================================================
   SAVITAR HERO
   ========================================================= */

.hero,
.hero-section,
section:first-of-type {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 138, 0, 0.18),
            transparent 35%
        ),
        var(--savitar-black) !important;
}

.hero h1,
.hero-section h1 {
    color: #FFFFFF !important;
}

.hero h1 span,
.hero .accent,
.hero-section .accent {
    color: var(--savitar-orange) !important;
}

.hero p,
.hero-section p {
    color: #F5F5F5 !important;
}
/* =========================================================
   CARDS
   ========================================================= */

.card,
.product-card,
.info-card,
.feature-card {
    background: #FFFFFF !important;
    border: 1px solid var(--savitar-border) !important;
}

.card:hover,
.product-card:hover,
.info-card:hover,
.feature-card:hover {
    border-color: var(--savitar-orange) !important;
    box-shadow: 0 12px 35px rgba(255, 138, 0, 0.12);
}
/* =========================================================
   STATISTICS
   ========================================================= */

.stats,
.stats-section,
.statistics,
.metrics {
    background: var(--savitar-orange-gradient) !important;
    color: #FFFFFF !important;
}

.stats *,
.stats-section *,
.statistics *,
.metrics * {
    color: #FFFFFF !important;
}
/* Remove WordPress default footer */
footer.wp-block-template-part {
    display: none !important;
}
/* =========================================================
   SAVITAR FOOTER TEXT VISIBILITY
   ========================================================= */

/* Footer section headings */
footer h2,
footer h3,
footer h4,
footer .footer-title,
footer .footer-heading {
    color: #FFFFFF !important;
}

/* Footer navigation links */
footer a {
    color: #FFFFFF !important;
}

/* Footer paragraph/text */
footer p,
footer li,
footer span {
    color: #FFFFFF !important;
}

/* Footer secondary text */
footer .muted,
footer .footer-muted {
    color: #FFFFFF !important;
}
/* =========================================================
   COUNTRIES WE EXPORT TO
   ========================================================= */

.countries-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 56px !important;
    align-items: center !important;
    width: 100%;
}

.countries-wrap > .map-frame {
    width: 100%;
}

.countries-wrap > .reveal {
    width: 100%;
}

.map-frame {
    background: #ffffff;
    border: 1px solid var(--line);
    padding: 18px;
    box-shadow: var(--shadow);
}

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

.countries-title {
    margin-top: 14px;
}

.countries-description {
    margin-top: 16px;
    color: var(--slate);
    font-size: 15.5px;
    line-height: 1.75;
}

.country-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.country-chip {
    padding: 9px 16px;
    border: 1px solid var(--line);
    background: #ffffff;
    font-size: 13.4px;
    font-weight: 500;
    color: var(--ink);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.country-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    display: inline-block;
    flex-shrink: 0;
}

.country-chip:hover {
    border-color: var(--teal);
    transform: translateY(-1px);
}

.countries-cta {
    margin-top: 30px;
}
@media (max-width: 980px) {

    #countries > .container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

}
/* =========================================================
   SAVITAR — COUNTRIES EXPORT SECTION
   FINAL LAYOUT
   ========================================================= */

#countries {
    width: 100% !important;
    display: block !important;
}

#countries .countries-wrap {
    width: 100% !important;
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;

    gap: 56px !important;
    align-items: center !important;
}


/* MAP */

#countries .countries-map {
    width: 100% !important;
    min-width: 0 !important;

    background: #ffffff !important;

    border: 1px solid var(--line) !important;

    padding: 18px !important;

    box-shadow: var(--shadow) !important;
}


#countries .countries-map img {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;
}


/* CONTENT */

#countries .countries-content {
    width: 100% !important;
    min-width: 0 !important;
}


#countries .countries-title {
    margin-top: 14px !important;

    color: var(--navy) !important;

    font-size: clamp(28px, 3.4vw, 40px) !important;

    line-height: 1.15 !important;
}


#countries .countries-description {
    margin-top: 16px !important;

    color: var(--slate) !important;

    font-size: 15.5px !important;

    line-height: 1.75 !important;

    max-width: 620px !important;
}


/* COUNTRY CHIPS */

#countries .country-chip-grid {
    display: flex !important;

    flex-wrap: wrap !important;

    gap: 10px !important;

    margin-top: 26px !important;
}


#countries .country-chip {
    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 9px 16px !important;

    background: #ffffff !important;

    border: 1px solid var(--line) !important;

    border-radius: 20px !important;

    color: var(--ink) !important;

    font-size: 13.4px !important;

    font-weight: 500 !important;

    white-space: nowrap !important;

    transition: all .2s ease !important;
}


#countries .country-chip::before {
    content: "" !important;

    display: inline-block !important;

    width: 6px !important;

    height: 6px !important;

    flex-shrink: 0 !important;

    border-radius: 50% !important;

    background: var(--savitar-orange) !important;
}


#countries .country-chip:hover {
    border-color: var(--savitar-orange) !important;

    transform: translateY(-1px);
}


/* BUTTON */

#countries .countries-cta {
    display: inline-flex !important;

    margin-top: 30px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    #countries .countries-wrap {
        grid-template-columns: 1fr !important;

        gap: 36px !important;
    }

    #countries .countries-map {
        width: 100% !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    #countries {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    #countries .countries-wrap {
        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }

    #countries .countries-map {
        padding: 10px !important;
    }

    #countries .countries-title {
        font-size: 30px !important;
    }

    #countries .countries-description {
        font-size: 14px !important;
    }

    #countries .country-chip-grid {
        gap: 8px !important;
    }

    #countries .country-chip {
        padding: 8px 12px !important;

        font-size: 12.5px !important;
    }

}
/* =========================================================
   SAVITAR HEADER LOGO
   ========================================================= */

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.savitar-logo-image {
    display: block;
    width: 190px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
}
@media (max-width: 980px) {

    .savitar-logo-image {
        width: 165px;
        max-height: 52px;
    }

}
/* ================================
   SAVITAR HEADER FIX
================================ */

.site-header {
    width: 100%;
    height: 82px !important;
    min-height: 82px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-header .nav-wrap {
    height: 82px !important;
    min-height: 82px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.site-header .logo {
    width: 200px !important;
    height: 82px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.site-header .logo-link {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.site-header .savitar-logo-image {
    display: block !important;
    width: 180px !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: 60px !important;
    object-fit: contain !important;
}

.site-header .primary-nav {
    height: 82px !important;
    display: flex !important;
    align-items: center !important;
}

.site-header .primary-nav ul {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.site-header .header-cta {
    display: flex !important;
    align-items: center !important;
    height: 82px !important;
    margin: 0 !important;
}
/* =========================================================
   SAVITAR — NEW HERO
========================================================= */

.hero {
    position: relative;
    min-height: calc(100vh - 82px);
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(255,138,0,0.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(201,151,62,0.08),
            transparent 30%
        ),
        #10243b;

    color: #ffffff;
}


/* GRID BACKGROUND */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    pointer-events: none;
}


/* SOFT ANIMATED LIGHT */

.hero::after {
    content: "";
    position: absolute;

    width: 600px;
    height: 600px;

    right: -180px;
    top: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,0,0.09),
            transparent 65%
        );

    animation: savitarHeroGlow 8s ease-in-out infinite alternate;

    pointer-events: none;
}

@keyframes savitarHeroGlow {

    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(-80px,50px) scale(1.15);
    }
}


/* HERO INNER */

.hero .hero-inner {

    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 48px));

    margin: auto;

    min-height: calc(100vh - 82px);

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 40px;

    padding: 55px 0;
}


/* LEFT CONTENT */

.hero .hero-content {
    max-width: 690px;
}


/* EYEBROW */

.hero .eyebrow {

    display: flex;
    align-items: center;
    gap: 12px;

    color: #e2bc69;

    font-size: 11px;
    letter-spacing: 3px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 24px;
}

.hero .eyebrow::before {

    content: "";

    width: 38px;
    height: 1px;

    background: #ff8a00;
}


/* HEADING */

.hero h1 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(48px, 5vw, 76px);

    line-height: 1.03;

    font-weight: 400;

    letter-spacing: -2px;

    color: #ffffff;

    margin-bottom: 27px;
}

.hero h1 .accent {
    color: #e2bc69;
}


/* DESCRIPTION */

.hero .hero-description {

    color: #c5d1dc;

    font-size: 18px;

    line-height: 1.75;

    max-width: 640px;

    margin-bottom: 34px;
}


/* BUTTON AREA */

.hero .hero-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 42px;
}


/* PRIMARY BUTTON */

.hero .primary-btn {

    border: none;

    padding: 16px 27px;

    background:
        linear-gradient(
            90deg,
            #ff8a00,
            #e96800
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    border-radius: 3px;

    box-shadow:
        0 10px 30px rgba(255,138,0,0.22);

    transition: 0.25s;
}

.hero .primary-btn:hover {
    transform: translateY(-3px);
}


/* SECONDARY BUTTON */

.hero .secondary-btn {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 15px 25px;

    border: 1px solid rgba(255,255,255,0.28);

    background: rgba(255,255,255,0.04);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    border-radius: 3px;

    text-decoration: none;

    transition: 0.25s;
}

.hero .secondary-btn:hover {
    background: rgba(255,255,255,0.10);
}


/* TRUST ROW */

.hero .trust-row {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    padding-top: 24px;

    border-top:
        1px solid rgba(255,255,255,0.12);
}

.hero .trust-item {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #b9c6d1;

    font-size: 12px;
}

.hero .trust-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff8a00;

    box-shadow:
        0 0 0 5px rgba(255,138,0,0.08);
}


/* =========================================================
   NETWORK VISUAL
========================================================= */

.hero .network-area {

    position: relative;

    height: 580px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* MAIN ORBIT */

.hero .network-orbit {

    width: 500px;
    height: 500px;

    border-radius: 50%;

    position: relative;

    border:
        1px solid rgba(201,151,62,0.24);

    box-shadow:
        inset 0 0 80px rgba(255,138,0,0.025),
        0 0 80px rgba(0,0,0,0.15);

    transition: transform 0.2s ease-out;
}


/* INNER ORBIT */

.hero .network-orbit::before {

    content: "";

    position: absolute;

    inset: 70px;

    border-radius: 50%;

    border:
        1px dashed rgba(255,255,255,0.13);

    animation:
        savitarRotate 25s linear infinite;
}

.hero .network-orbit::after {

    content: "";

    position: absolute;

    inset: 145px;

    border-radius: 50%;

    border:
        1px solid rgba(201,151,62,0.15);

    animation:
        savitarRotateReverse 18s linear infinite;
}

@keyframes savitarRotate {

    to {
        transform: rotate(360deg);
    }
}

@keyframes savitarRotateReverse {

    to {
        transform: rotate(-360deg);
    }
}


/* CENTER */

.hero .network-center {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 155px;
    height: 155px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #254b67,
            #10243b 70%
        );

    border:
        1px solid rgba(226,188,105,0.65);

    box-shadow:
        0 0 0 15px rgba(201,151,62,0.04),
        0 0 60px rgba(255,138,0,0.12);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    z-index: 5;
}

.hero .network-center strong {

    font-family: Georgia, serif;

    font-size: 25px;

    color: #ffffff;
}

.hero .network-center span {

    margin-top: 7px;

    font-size: 9px;

    letter-spacing: 2px;

    color: #e2bc69;

    font-weight: 700;
}


/* CENTER PULSE */

.hero .network-center::before {

    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 1px solid rgba(255,138,0,0.35);

    animation:
        savitarPulse 2.5s ease-out infinite;
}

@keyframes savitarPulse {

    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}


/* CONNECTION LINES */

.hero .connection {

    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(255,138,0,0.8),
            rgba(201,151,62,0.15),
            transparent
        );

    z-index: 1;

    animation:
        savitarLinePulse 2.4s ease-in-out infinite;
}

.hero .connection.one {
    width: 225px;
    transform: rotate(-25deg);
}

.hero .connection.two {
    width: 250px;
    transform: rotate(28deg);
    animation-delay: .5s;
}

.hero .connection.three {
    width: 220px;
    transform: rotate(155deg);
    animation-delay: .9s;
}

.hero .connection.four {
    width: 245px;
    transform: rotate(205deg);
    animation-delay: 1.3s;
}

@keyframes savitarLinePulse {

    0%,100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


/* DESTINATION CARDS */

.hero .destination {

    position: absolute;

    width: 120px;

    padding: 11px 13px;

    background:
        rgba(17,39,59,0.92);

    border:
        1px solid rgba(255,255,255,0.14);

    backdrop-filter: blur(10px);

    z-index: 8;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.18);

    animation:
        savitarFloat 4s ease-in-out infinite;
}

.hero .destination::before {

    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ff8a00;

    box-shadow:
        0 0 0 6px rgba(255,138,0,0.10);

    top: 13px;
    left: 13px;
}

.hero .destination strong {

    display: block;

    margin-left: 17px;

    color: #ffffff;

    font-size: 12px;
}

.hero .destination span {

    display: block;

    margin-top: 8px;

    color: #8fa2b3;

    font-size: 9px;

    letter-spacing: .8px;
}


.hero .destination.africa {
    left: 0;
    top: 34%;
}

.hero .destination.europe {
    left: 22%;
    top: 3%;
    animation-delay: .7s;
}

.hero .destination.asia {
    right: 0;
    top: 32%;
    animation-delay: 1.2s;
}

.hero .destination.middle-east {
    right: 16%;
    bottom: 5%;
    animation-delay: 1.8s;
}

@keyframes savitarFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* PARTICLES */

.hero .particle {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ff8a00;

    opacity: .7;

    animation:
        savitarParticle 5s ease-in-out infinite;
}

.hero .p1 {
    left: 15%;
    top: 17%;
}

.hero .p2 {
    right: 14%;
    top: 20%;
    animation-delay: 1s;
}

.hero .p3 {
    left: 12%;
    bottom: 18%;
    animation-delay: 2s;
}

.hero .p4 {
    right: 27%;
    bottom: 20%;
    animation-delay: 3s;
}

@keyframes savitarParticle {

    0%,100% {
        transform: translateY(0);
        opacity: .3;
    }

    50% {
        transform: translateY(-18px);
        opacity: 1;
    }
}


/* NETWORK LABEL */

.hero .network-label {

    position: absolute;

    left: 50%;
    bottom: 15px;

    transform: translateX(-50%);

    color: #728799;

    font-size: 10px;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    white-space: nowrap;
}


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

@media (max-width: 1050px) {

    .hero .hero-inner {

        grid-template-columns: 1fr;

        padding: 70px 0;
    }

    .hero .hero-content {
        max-width: 850px;
    }

    .hero .network-area {
        height: 480px;
    }

    .hero .network-orbit {
        width: 430px;
        height: 430px;
    }

    .hero .network-center {
        width: 135px;
        height: 135px;
    }
}


@media (max-width: 760px) {

    .hero .hero-inner {

        width: calc(100% - 28px);

        padding: 55px 0 35px;

        gap: 30px;
    }

    .hero h1 {

        font-size: 46px;

        letter-spacing: -1.5px;
    }

    .hero .hero-description {

        font-size: 16px;

        line-height: 1.65;
    }

    .hero .hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }

    .hero .primary-btn,
    .hero .secondary-btn {

        width: 100%;

        justify-content: center;

        text-align: center;
    }

    .hero .trust-row {

        gap: 14px;

        flex-direction: column;
    }

    .hero .network-area {

        height: 390px;
    }

    .hero .network-orbit {

        width: 310px;
        height: 310px;
    }

    .hero .network-orbit::before {
        inset: 45px;
    }

    .hero .network-orbit::after {
        inset: 90px;
    }

    .hero .network-center {

        width: 105px;
        height: 105px;
    }

    .hero .network-center strong {
        font-size: 19px;
    }

    .hero .network-center span {
        font-size: 7px;
    }

    .hero .connection.one,
    .hero .connection.two,
    .hero .connection.three,
    .hero .connection.four {

        width: 145px;
    }

    .hero .destination {

        width: 92px;

        padding: 9px;
    }

    .hero .destination strong {
        font-size: 9px;
    }

    .hero .destination span {
        font-size: 7px;
    }

    .hero .destination.africa {
        left: -5px;
    }

    .hero .destination.europe {
        left: 13%;
    }

    .hero .destination.asia {
        right: -5px;
    }

    .hero .destination.middle-east {
        right: 8%;
    }

    .hero .network-label {

        bottom: 0;

        font-size: 8px;
    }
}


@media (max-width: 430px) {

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

    .hero .network-area {
        height: 350px;
    }

    .hero .network-orbit {

        width: 270px;
        height: 270px;
    }

    .hero .destination {
        width: 82px;
    }

    .hero .destination.europe {
        top: 0;
    }

    .hero .destination.middle-east {
        bottom: 0;
    }
}
@media screen and (max-width: 768px) {

    .site-header .nav-wrap {
        width: 100%;
        min-height: 72px;
        padding: 8px 18px 8px 10px;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* LOGO — move further left */
    .site-header .logo {
        display: block;
        width: auto;
        max-width: 150px;
        margin: 0;
        padding: 0;
    }

    .site-header .savitar-logo-image {
        display: block;
        width: auto;
        max-width: 145px;
        height: auto;
        max-height: 50px;
        object-fit: contain;
    }

    /* Hide desktop navigation */
    .site-header nav.primary-nav,
    .site-header .primary-nav {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Mobile menu area */
    .site-header .header-cta {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        margin: 0;
        padding: 0;

        flex: 0 0 48px;
    }

    .site-header .header-cta .btn {
        display: none !important;
    }

    /* Hamburger */
    .site-header .header-cta::before {
        content: "☰";

        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        background: #ff8a00;
        color: #10243b;

        font-family: Arial, sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1;

        border-radius: 3px;
        box-sizing: border-box;
    }
}
/* =========================================================
   MOBILE HERO
   ========================================================= */

@media screen and (max-width: 768px) {

    #home {
        width: 100%;
        overflow: hidden;
    }

    /* Main hero */
    #home .hero-wrap {
        width: 100%;
        max-width: 100%;
        min-height: auto;

        padding: 75px 20px 45px;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;

        align-items: center;

        text-align: center;
    }

    /* Hero text area */
    #home .hero-content,
    #home .hero-left {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

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

    /* Eyebrow */
    #home .eyebrow {
        margin: 0 0 20px;

        text-align: center;

        font-size: 10px;
        line-height: 1.5;

        letter-spacing: 3px;
    }

    /* Heading */
    #home h1,
    #home .hero-title {

        width: 100%;
        max-width: 390px;

        margin: 0 auto 22px;

        text-align: center;

        font-size: 40px;
        line-height: 1.08;

        letter-spacing: -0.5px;
    }

    /* Description */
    #home .hero-description,
    #home .hero-copy {

        width: 100%;
        max-width: 390px;

        margin: 0 auto 28px;

        text-align: center;

        font-size: 16px;
        line-height: 1.6;
    }


    /* =========================================
       TWO BUTTONS SIDE BY SIDE
    ========================================= */

    #home .hero-actions {

        width: 100%;
        max-width: 430px;

        margin: 0 auto;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

        align-items: stretch;
    }

    #home .hero-actions .btn {

        width: 100%;

        min-height: 54px;

        padding: 12px 8px;

        box-sizing: border-box;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        font-size: 14px;

        white-space: nowrap;
    }


    /* =========================================
       ANIMATION BELOW BUTTONS
    ========================================= */

    #home .hero-right,
    #home .hero-visual,
    #home .network-animation {

        width: 100%;
        max-width: 430px;

        margin: 42px auto 0;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        box-sizing: border-box;
    }

    /* If the animation is inside hero-grid */
    #home .hero-grid {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0;
    }

}/* =========================================================
   MOBILE HERO — FINAL FIX
   Desktop remains untouched
   ========================================================= */

@media (max-width: 768px) {

    /* Keep hero centered */
    #home .hero-wrap {
        padding: 70px 20px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Center hero content */
    #home .hero-content,
    #home .hero-left {
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    /* -------------------------
       BUTTONS: LEFT + RIGHT
       ------------------------- */

    #home .hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 25px;
    }

    #home .hero-actions .btn {
        width: 100%;
        min-height: 52px;
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
    }


    /* -------------------------
       REMOVE THE 3 HERO POINTS
       ------------------------- */

    #home .hero-points,
    #home .hero-benefits,
    #home .hero-trust,
    #home .hero-features,
    #home .hero-highlights {
        display: none !important;
    }


    /* -------------------------
       ANIMATION
       Move directly below buttons
       ------------------------- */

    #home .hero-visual,
    #home .hero-animation,
    #home .network-animation {
        width: 100%;
        max-width: 430px;
        margin: 35px auto 0;
    }

}
/* =========================================================
   MOBILE COUNTRIES SECTION
   Desktop remains untouched
   ========================================================= */

@media (max-width: 768px) {

    #countries .countries-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 55px 22px 60px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /*
     * Make the inner content behave like individual
     * grid items so we can control the exact mobile order.
     */
    #countries .countries-wrap > .reveal:nth-child(2) {
        display: contents;
    }


    /* -------------------------
       TITLE
       ------------------------- */

    #countries .eyebrow {
        display: none !important;
    }

    #countries .countries-title {
        order: 1;
        width: 100%;
        margin: 0 0 30px;
        text-align: center;
        font-size: 34px;
        line-height: 1.12;
    }


    /* -------------------------
       REMOVE DESCRIPTION
       ------------------------- */

    #countries .countries-description {
        display: none !important;
    }


    /* -------------------------
       MAP
       ------------------------- */

    #countries .map-frame {
        order: 2;
        width: 100%;
        max-width: 360px;
        margin: 0 auto 30px;
        box-sizing: border-box;
    }

    #countries .map-frame img {
        display: block;
        width: 100%;
        height: auto;
    }


    /* -------------------------
       COUNTRY CAPSULES
       ------------------------- */

    #countries .country-chip-grid {
        order: 3;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    #countries .country-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 14px;
        line-height: 1;
        border-radius: 999px;
        box-sizing: border-box;
    }


    /* -------------------------
       REMOVE CTA
       ------------------------- */

    #countries .countries-cta {
        display: none !important;
    }

}
/* =========================================================
   MOBILE NAVIGATION — FUNCTIONAL FIX
   (Real hamburger button wired to #mobileNav via JS,
   replacing the old non-functional ::before icon)
   ========================================================= */

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-menu-toggle:hover {
    background: rgba(14,32,54,0.06) !important;
}

.mobile-menu-icon {
    position: relative;
    width: 22px;
    height: 16px;
    display: inline-block;
}

.mobile-menu-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--savitar-black, var(--navy));
    border-radius: 2px;
    transition:
        transform .25s ease,
        opacity .25s ease,
        top .25s ease;
}

.mobile-menu-icon .bar-one {
    top: 0;
}

.mobile-menu-icon .bar-two {
    top: 7px;
}

.mobile-menu-icon .bar-three {
    top: 14px;
}

.mobile-menu-toggle.active .bar-one {
    top: 7px;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active .bar-two {
    opacity: 0;
}

.mobile-menu-toggle.active .bar-three {
    top: 7px;
    transform: rotate(-45deg);
}

/* Mobile nav panel */

.mobile-nav {
    display: none;
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(14,32,54,.16);
    z-index: 59;
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity .2s ease,
        transform .2s ease;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav ul {
    padding: 10px 24px 22px;
}

.mobile-nav li {
    border-bottom: 1px solid var(--line);
}

.mobile-nav li:last-child {
    border-bottom: none;
}

.mobile-nav a {
    display: block;
    padding: 14px 4px;
    font-size: 15.5px;
}

.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: 82px;
    background: rgba(14,32,54,.35);
    z-index: 58;
}

.mobile-nav-backdrop.open {
    display: block;
}

body.nav-open {
    overflow: hidden;
}

@media (max-width: 980px) {

    .mobile-menu-toggle {
        display: flex !important;
    }

    .site-header .header-cta .btn {
        display: none !important;
    }

    .site-header .header-cta {
        width: auto !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    /* Retire the old decorative ☰ hack — the real button now works */
    .site-header .header-cta::before {
        content: none !important;
    }

}

@media (min-width: 981px) {

    .mobile-nav,
    .mobile-nav-backdrop {
        display: none !important;
    }

}


/* =========================================================
   TABLE HORIZONTAL-SCROLL SAFETY (mobile)
   ========================================================= */

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   GLOBAL MOBILE POLISH
   ========================================================= */

html,
body {
    overflow-x: hidden;
}

@media (max-width: 480px) {

    .container {
        padding: 0 18px;
    }

    .modal-hero {
        padding: 26px 22px;
    }

    .modal-body {
        padding: 26px 22px 30px;
    }

    .rfq-modal .modal-body {
        padding: 26px 22px;
    }

    .audit-cta {
        padding: 30px 24px;
    }

    .info-block,
    .testi-card,
    .reg-card {
        padding: 22px;
    }
}
/* =========================================================
   CATALOGUE SEARCH — SAVITAR STYLE
   ========================================================= */

.catalogue-search-wrap {
    width: 100%;
    max-width: 820px;
    margin-top: 30px;
}


/* Label */

.catalogue-search-label {
    display: block;
    margin-bottom: 10px;

    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: var(--navy);
}


/* Search container */

.catalogue-search {
    position: relative;

    width: 100%;
}


/* Search icon */

.catalogue-search-icon {
    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--slate);

    font-size: 21px;

    pointer-events: none;
}


/* Input */

.catalogue-search-input {
    width: 100%;
    height: 58px;

    box-sizing: border-box;

    padding: 0 54px 0 52px;

    border: 1px solid #d8d5cc;

    background: #fff;

    color: var(--navy);

    font-family: var(--sans);
    font-size: 15px;

    outline: none;

    border-radius: 2px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* Placeholder */

.catalogue-search-input::placeholder {
    color: #8b9299;
    opacity: 1;
}


/* Focus */

.catalogue-search-input:focus {
    border-color: var(--orange);

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(255, 123, 0, .10);
}


/* Clear button */

.catalogue-search-clear {
    position: absolute;

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: #7c858e;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.catalogue-search-clear:hover {
    color: var(--orange);

    background: #f7f5ef;

    border-radius: 50%;
}


/* Search result count */

.catalogue-count {
    margin-top: 14px;

    color: var(--slate);

    font-size: 11px;
    letter-spacing: .04em;
}


/* No results */

.catalogue-no-results {
    width: 100%;

    box-sizing: border-box;

    padding: 55px 30px;

    border: 1px solid #e1ddd4;

    background: #fff;

    text-align: center;
}


.catalogue-no-results strong {
    display: block;

    margin-bottom: 8px;

    font-family: var(--serif);

    font-size: 25px;
    font-weight: 500;

    color: var(--navy);
}


.catalogue-no-results p {
    margin: 0;

    color: var(--slate);

    font-size: 14px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .catalogue-search-wrap {
        max-width: 100%;
        margin-top: 22px;
    }


    .catalogue-search-input {
        height: 54px;

        padding-left: 48px;

        font-size: 14px;
    }


    .catalogue-search-icon {
        left: 16px;
    }


    .catalogue-search-clear {
        right: 9px;
    }

}
/* =========================================================
   RFQ PRODUCT SELECTOR
   ========================================================= */

.rfq-product-field {
    position: relative;
}


.rfq-product-selector {
    position: relative;
    width: 100%;
}


.rfq-product-trigger {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 15px;

    border: 1px solid #d7dce2;
    border-radius: 4px;

    background: #ffffff;
    color: #17243a;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.rfq-product-trigger:hover {
    border-color: #9da7b4;
}


.rfq-product-trigger:focus {
    outline: none;

    border-color: #17243a;

    box-shadow:
        0 0 0 3px rgba(23, 36, 58, 0.08);
}


.rfq-product-arrow {
    margin-left: 15px;

    font-size: 14px;

    color: #687386;

    flex-shrink: 0;
}


/* ---------------------------------------------------------
   DROPDOWN
   --------------------------------------------------------- */

.rfq-product-dropdown {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;
    right: 0;

    z-index: 1000;

    background: #ffffff;

    border: 1px solid #d7dce2;

    border-radius: 6px;

    box-shadow:
        0 12px 30px rgba(15, 28, 48, 0.15);

    overflow: hidden;
}


/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.rfq-product-search {
    padding: 10px;

    border-bottom: 1px solid #e6e9ed;

    background: #ffffff;
}


.rfq-product-search input {
    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    border: 1px solid #d7dce2;

    border-radius: 4px;

    background: #f9fafb;

    color: #17243a;

    font: inherit;
}


.rfq-product-search input:focus {
    outline: none;

    border-color: #17243a;

    background: #ffffff;
}


/* ---------------------------------------------------------
   SCROLLABLE PRODUCT LIST
   --------------------------------------------------------- */

.rfq-product-list {
    max-height: 240px;

    overflow-y: auto;

    overscroll-behavior: contain;
}


/* scrollbar */

.rfq-product-list::-webkit-scrollbar {
    width: 7px;
}


.rfq-product-list::-webkit-scrollbar-track {
    background: #f3f4f6;
}


.rfq-product-list::-webkit-scrollbar-thumb {
    background: #b7bec8;

    border-radius: 10px;
}


/* ---------------------------------------------------------
   PRODUCT OPTION
   --------------------------------------------------------- */

.rfq-product-option {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;

    padding: 11px 13px;

    border: 0;

    border-bottom: 1px solid #edf0f3;

    background: #ffffff;

    color: #17243a;

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.rfq-product-option:hover {
    background: #f5f7f9;
}


.rfq-option-name {
    font-weight: 600;

    line-height: 1.35;
}


.rfq-option-meta {
    font-size: 12px;

    color: #788394;
}


/* ---------------------------------------------------------
   NO RESULTS
   --------------------------------------------------------- */

.rfq-product-empty {
    padding: 14px;

    color: #788394;

    font-size: 13px;

    text-align: center;
}


/* ---------------------------------------------------------
   OTHER
   --------------------------------------------------------- */

.rfq-other-option {
    color: #d56b00;

    font-weight: 600;

    border-top: 1px solid #dfe3e8;

    border-bottom: 0;

    background: #fffaf3;
}


.rfq-other-option:hover {
    background: #fff2df;
}


/* ---------------------------------------------------------
   OTHER PRODUCT INPUT
   --------------------------------------------------------- */

.rfq-other-product {
    margin-top: 12px;
}


.rfq-other-product label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 600;

    color: #17243a;
}


.rfq-other-product input {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 13px;

    border: 1px solid #d7dce2;

    border-radius: 4px;

    background: #ffffff;

    color: #17243a;

    font: inherit;
}


.rfq-other-product input:focus {
    outline: none;

    border-color: #17243a;

    box-shadow:
        0 0 0 3px rgba(23, 36, 58, 0.08);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .rfq-product-list {
        max-height: 210px;
    }

    .rfq-product-dropdown {
        max-width: 100%;
    }

}
/* =========================================================
   RFQ PRODUCT SELECTOR - FINAL VISIBILITY OVERRIDE
   ========================================================= */

.rfq-product-field {
    position: relative !important;
}


.rfq-product-selector {
    position: relative !important;
    width: 100% !important;
    z-index: 10001 !important;
}


/* Selected product button */

.rfq-product-trigger {
    width: 100% !important;
    min-height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box !important;

    padding: 13px 18px !important;

    background: #ffffff !important;

    border: 1px solid #d7dce2 !important;
    border-radius: 5px !important;

    color: #17243a !important;

    cursor: pointer !important;

    text-align: left !important;

    font-family: inherit !important;
    font-size: 16px !important;

    position: relative !important;
    z-index: 10002 !important;
}


/* Dropdown */

.rfq-product-dropdown {
    position: absolute !important;

    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    display: block !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #cfd5dc !important;

    border-radius: 6px !important;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.20) !important;

    overflow: hidden !important;

    z-index: 999999 !important;
}


/*
|--------------------------------------------------------------------------
| IMPORTANT
|--------------------------------------------------------------------------
| The HTML uses the hidden attribute.
| display:block above must NOT override hidden.
|--------------------------------------------------------------------------
*/

.rfq-product-dropdown[hidden] {
    display: none !important;
}


/* Search container */

.rfq-product-search {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 10px !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e1e5e9 !important;
}


/* Search input */

.rfq-product-search input {
    display: block !important;

    width: 100% !important;

    height: 50px !important;

    box-sizing: border-box !important;

    padding: 10px 14px !important;

    background: #ffffff !important;

    border: 1px solid #bfc7d0 !important;

    border-radius: 5px !important;

    color: #17243a !important;

    font-family: inherit !important;

    font-size: 16px !important;

    outline: none !important;
}


.rfq-product-search input:focus {
    border-color: #17243a !important;

    box-shadow:
        0 0 0 2px rgba(23, 36, 58, 0.08) !important;
}


/* Product scrolling area */

.rfq-product-list {
    display: block !important;

    width: 100% !important;

    max-height: 260px !important;

    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
}


/* Every product button */

.rfq-product-list .rfq-product-option {
    display: flex !important;

    width: 100% !important;

    min-height: 58px !important;

    box-sizing: border-box !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    padding: 10px 16px !important;

    margin: 0 !important;

    background: #ffffff !important;

    color: #17243a !important;

    border: 0 !important;

    border-bottom: 1px solid #edf0f2 !important;

    font-family: inherit !important;

    font-size: 15px !important;

    text-align: left !important;

    cursor: pointer !important;

    visibility: visible !important;

    opacity: 1 !important;
}


.rfq-product-list .rfq-product-option:hover {
    background: #f4f6f8 !important;
}


/* Product name */

.rfq-option-name {
    display: block !important;

    color: #17243a !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* Strength / form */

.rfq-option-meta {
    display: block !important;

    margin-top: 3px !important;

    color: #6c7887 !important;

    font-size: 12px !important;

    line-height: 1.3 !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* No results */

.rfq-product-empty {
    width: 100% !important;

    box-sizing: border-box !important;

    padding: 18px !important;

    background: #ffffff !important;

    color: #748196 !important;

    font-size: 14px !important;

    text-align: center !important;
}


.rfq-product-empty[hidden] {
    display: none !important;
}


/* Other button */

.rfq-product-dropdown > #rfqOtherOption {
    display: flex !important;

    width: 100% !important;

    min-height: 58px !important;

    box-sizing: border-box !important;

    align-items: center !important;

    padding: 12px 16px !important;

    margin: 0 !important;

    background: #fff8ef !important;

    color: #d96b00 !important;

    border: 0 !important;

    border-top: 1px solid #e1e5e9 !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    text-align: left !important;

    cursor: pointer !important;

    visibility: visible !important;

    opacity: 1 !important;
}


.rfq-product-dropdown > #rfqOtherOption:hover {
    background: #fff0dc !important;
}


/* Other product input */

.rfq-other-product {
    margin-top: 12px !important;

    width: 100% !important;

    box-sizing: border-box !important;
}


.rfq-other-product[hidden] {
    display: none !important;
}


.rfq-other-product input {
    width: 100% !important;

    box-sizing: border-box !important;

    min-height: 48px !important;

    padding: 11px 13px !important;

    background: #ffffff !important;

    border: 1px solid #d7dce2 !important;

    border-radius: 5px !important;

    color: #17243a !important;

    font-family: inherit !important;

    font-size: 15px !important;
}


/* Mobile */

@media (max-width: 600px) {

    .rfq-product-dropdown {
        width: 100% !important;
    }

    .rfq-product-list {
        max-height: 220px !important;
    }

}
/* =========================================================
   SAVITAR PRODUCT DETAIL PAGE
   ========================================================= */

.savitar-product-page #catalogue {
    padding-top: 55px !important;
    padding-bottom: 90px !important;
    background: #ffffff !important;
}


/* ---------------------------------------------------------
   MAIN CONTAINER
   --------------------------------------------------------- */

.product-detail-page {
    width: 100%;
}


.product-detail-container {

    width: min(
        1220px,
        calc(100% - 56px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap: 38px;

    align-items: start;

}


/* ---------------------------------------------------------
   LEFT SIDE
   --------------------------------------------------------- */

.product-detail-left {
    width: 100%;
}


.product-detail-image-box {

    position: relative;

    width: 100%;

    min-height: 520px;

    background: #f7f9fb;

    border: 1px solid #e2e7ec;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.product-detail-image {

    display: block;

    width: 100%;

    height: 100%;

    min-height: 520px;

    object-fit: contain;

    padding: 35px;

    box-sizing: border-box;

}


.product-detail-placeholder {

    width: 100%;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #10243b,
            #1a344f
        );

    color: #ffffff;

    font-family:
        'IBM Plex Mono',
        monospace;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* ---------------------------------------------------------
   VERIFIED BADGE
   --------------------------------------------------------- */

.product-detail-badge {

    position: absolute;

    top: 22px;

    left: 22px;

    z-index: 5;

    padding: 8px 13px;

    border-radius: 999px;

    background: #ecfff5;

    border: 1px solid #9de8c0;

    color: #087b4c;

    font-family:
        'IBM Plex Mono',
        monospace;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .07em;

    text-transform: uppercase;

}


/* ---------------------------------------------------------
   RIGHT SIDE
   --------------------------------------------------------- */

.product-detail-right {

    width: 100%;

    padding-top: 4px;

}


.product-detail-form {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    border: 1px solid #b9e1ff;

    background: #f0f9ff;

    color: #087fc1;

    font-family:
        'IBM Plex Mono',
        monospace;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .07em;

    text-transform: uppercase;

    margin-bottom: 17px;

}


.product-detail-title {

    margin: 0 !important;

    color: #111111 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        clamp(
            36px,
            4vw,
            54px
        ) !important;

    line-height: 1.08 !important;

    letter-spacing: -1.2px;

}


.product-detail-strength {

    margin-top: 12px;

    color: #66768a;

    font-size: 18px;

    line-height: 1.5;

}


/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

.product-detail-section {

    margin-top: 34px;

}


.product-detail-section h3 {

    margin: 0 0 13px !important;

    color: #111111 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 18px !important;

    font-weight: 700 !important;

}


.product-detail-section p {

    margin: 0;

    color: #607083;

    font-size: 15px;

    line-height: 1.7;

}


.product-detail-section strong {

    color: #17243a;

}


/* ---------------------------------------------------------
   SPECIFICATION TABLE
   --------------------------------------------------------- */

.product-detail-table {

    width: 100%;

    border-top:
        1px solid #e1e6eb;

}


.product-detail-row {

    display: grid;

    grid-template-columns:
        38% 62%;

    min-height: 54px;

    border-bottom:
        1px solid #e1e6eb;

}


.product-detail-row span {

    display: flex;

    align-items: center;

    padding: 11px 14px;

    background: #f7f9fb;

    color: #62758a;

    font-size: 13px;

    font-weight: 600;

}


.product-detail-row strong {

    display: flex;

    align-items: center;

    padding: 11px 16px;

    color: #17243a;

    font-size: 14px;

    font-weight: 600;

}


/* ---------------------------------------------------------
   ACTION BUTTONS
   --------------------------------------------------------- */

.product-detail-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 34px;

}


.product-detail-primary,
.product-detail-secondary {

    min-height: 50px;

    padding:
        13px 22px;

    border-radius: 4px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


/* Primary */

.product-detail-primary {

    border: 1px solid #ff8a00;

    background:
        linear-gradient(
            135deg,
            #ff9d00,
            #ff4d00
        );

    color: #ffffff;

    box-shadow:
        0 8px 22px
        rgba(
            255,
            138,
            0,
            .18
        );

}


.product-detail-primary:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(
            255,
            138,
            0,
            .25
        );

}


/* Secondary */

.product-detail-secondary {

    border:
        1px solid #d6dce3;

    background: #ffffff;

    color: #17243a;

}


.product-detail-secondary:hover {

    border-color:
        #ff8a00;

    color:
        #ff8a00;

    transform:
        translateY(-2px);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .product-detail-container {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .product-detail-image-box {

        min-height: 430px;

    }


    .product-detail-image {

        min-height: 430px;

    }


    .product-detail-placeholder {

        min-height: 430px;

    }


    .product-detail-right {

        padding-top: 0;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .savitar-product-page #catalogue {

        padding-top: 30px !important;

        padding-bottom: 55px !important;

    }


    .product-detail-container {

        width:
            calc(100% - 32px);

        gap: 28px;

    }


    .product-detail-image-box {

        min-height: 330px;

        border-radius: 10px;

    }


    .product-detail-image {

        min-height: 330px;

        padding: 24px;

    }


    .product-detail-placeholder {

        min-height: 330px;

    }


    .product-detail-badge {

        top: 14px;

        left: 14px;

        font-size: 8px;

        padding:
            7px 10px;

    }


    .product-detail-title {

        font-size: 36px !important;

        line-height: 1.08 !important;

        letter-spacing: -.7px;

    }


    .product-detail-strength {

        font-size: 16px;

    }


    .product-detail-section {

        margin-top: 27px;

    }


    .product-detail-section h3 {

        font-size: 17px !important;

    }


    .product-detail-section p {

        font-size: 14px;

    }


    .product-detail-row {

        grid-template-columns:
            42% 58%;

    }


    .product-detail-row span,
    .product-detail-row strong {

        padding:
            10px 11px;

        font-size: 12px;

    }


    .product-detail-actions {

        flex-direction: column;

        margin-top: 28px;

    }


    .product-detail-primary,
    .product-detail-secondary {

        width: 100%;

        min-height: 52px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .product-detail-container {

        width:
            calc(100% - 24px);

    }


    .product-detail-title {

        font-size: 32px !important;

    }


    .product-detail-image-box {

        min-height: 290px;

    }


    .product-detail-image {

        min-height: 290px;

    }

}
/* ---------------------------------------------------------
   PRODUCT PAGE / CATALOGUE HERO
   --------------------------------------------------------- */

/* .catalogue-page-section h1,
.catalogue-page-section .catalogue-title,
.catalogue-page-section .page-title {
    color: #ffffff !important;
} */
.catalogue-page-title {
    color: #ffffff !important;
}
.product-detail-row strong {
    line-height: 1.5;
}

@media (max-width: 768px) {

    .product-detail-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .product-detail-row strong {
        display: block;
        line-height: 1.5;
    }

}