/* =========================================================
   Delta Retail Solution — Typography & Trust Enhancements
   Does not replace the existing visual identity.
   ========================================================= */

:root{
  --drs-teal:#03313d;
  --drs-orange:#ed7e23;
  --drs-ink:#071826;
  --drs-text:#d8e4ea;
  --drs-muted:#9eb3bd;
}

/* ---------- Typography uplift ---------- */
body{
  font-size:16.5px !important;
  line-height:1.65 !important;
}
.nav a{
  font-size:15.5px !important;
  font-weight:750 !important;
  letter-spacing:-.01em;
}
.topbar,.topbar a{font-size:13.5px !important}
.hero-copy h1{
  font-size:clamp(44px,5.1vw,72px) !important;
  line-height:1.06 !important;
  letter-spacing:-.035em !important;
}
.hero-copy>p{
  font-size:clamp(17px,1.45vw,20px) !important;
  line-height:1.75 !important;
}
.eyebrow{
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:.02em !important;
}
.section-head h2,
.section h2{
  font-size:clamp(34px,3.5vw,48px);
  line-height:1.13;
  letter-spacing:-.025em;
}
.section-head>p{
  max-width:840px;
  font-size:17px !important;
  line-height:1.75 !important;
}
.card h3,.digital-card h3,.industry h3,.success-card h3,
.client-card h3,.partner-card h3,.why-delta-grid h3{
  font-size:19px !important;
  line-height:1.28 !important;
}
.card p,.digital-card p,.industry p,.success-card p,
.client-card p,.partner-card p,.why-delta-grid p{
  font-size:15px !important;
  line-height:1.65 !important;
}
.btn{
  font-size:15.5px !important;
  font-weight:800 !important;
}
.btn-lg{font-size:16.5px !important}
input,textarea,select,label{
  font-size:16px !important;
}
.contact-card h3,.contact-section h2{line-height:1.15}
.contact-section p{font-size:16px;line-height:1.7}

/* Header profile button */
.desktop-profile{
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
  background:rgba(255,255,255,.035) !important;
}
.desktop-profile:hover{
  border-color:rgba(237,126,35,.62) !important;
  background:rgba(237,126,35,.08) !important;
  color:#fff !important;
}
.profile-hero-btn{
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.035) !important;
  color:#dcebf2 !important;
}

/* ---------- Partners & Credentials ---------- */
.partners-credentials{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 15%,rgba(237,126,35,.055),transparent 30%),
    radial-gradient(circle at 87% 65%,rgba(0,174,239,.055),transparent 32%);
}
.partner-credential-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}
.partner-card{
  position:relative;
  min-width:0;
  min-height:330px;
  overflow:hidden;
  border:1px solid rgba(130,188,213,.16);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(6,31,48,.96),rgba(5,23,37,.98));
  box-shadow:0 22px 55px rgba(0,0,0,.14);
  padding:26px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.partner-card:hover{
  transform:translateY(-5px);
  border-color:rgba(237,126,35,.45);
  box-shadow:0 30px 65px rgba(0,0,0,.20);
}
.microsoft-credential{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:20px;
  align-items:start;
}
.microsoft-symbol{
  width:78px;height:78px;
  display:grid;place-items:center;
  border-radius:20px;
  background:
    linear-gradient(135deg,rgba(237,126,35,.22),rgba(0,165,220,.12)),
    rgba(255,255,255,.04);
  border:1px solid rgba(237,126,35,.28);
  color:#ed7e23;
  font-size:38px;
  font-weight:900;
}
.partner-type{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-bottom:11px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(237,126,35,.25);
  background:rgba(237,126,35,.07);
  color:#ffaf71;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.partner-card h3{
  margin:0 0 11px;
  color:#fff;
}
.partner-card p{
  margin:0;
  color:#a8bdc7;
}
.credential-tags{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-top:18px;
}
.credential-tags span{
  padding:6px 9px;
  border-radius:9px;
  border:1px solid rgba(134,191,216,.14);
  background:rgba(255,255,255,.035);
  color:#cfe1e8;
  font-size:11px;
  font-weight:700;
}
.credential-media{
  height:145px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:-4px -4px 20px;
  padding:10px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#f4f9fb);
}
.credential-media img{
  display:block;
  max-width:100%;
  max-height:125px;
  width:auto;height:auto;
  object-fit:contain;
}
.msp-media img{max-height:132px}

.profile-download-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:22px;
  padding:24px 26px;
  border:1px solid rgba(237,126,35,.28);
  border-radius:20px;
  background:
    linear-gradient(100deg,rgba(237,126,35,.105),rgba(3,49,61,.38)),
    rgba(6,29,45,.92);
}
.profile-download-band>div{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.profile-download-band strong{
  color:#fff;
  font-size:19px;
}
.profile-download-band span{
  color:#a9bec8;
  font-size:14.5px;
}

/* ---------- Why Delta ---------- */
.why-delta-section{
  position:relative;
  overflow:hidden;
}
.why-delta-shell{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:34px;
  align-items:stretch;
}
.why-delta-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px;
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(3,49,61,.98),rgba(6,24,39,.98));
  border:1px solid rgba(237,126,35,.18);
  box-shadow:0 22px 60px rgba(0,0,0,.15);
}
.why-delta-intro h2{
  margin:10px 0 16px;
  color:#fff;
  font-size:clamp(34px,3.4vw,47px);
}
.why-delta-intro p{
  color:#a9c0ca;
  font-size:16px;
  line-height:1.75;
  margin-bottom:22px;
}
.why-delta-intro .btn{align-self:flex-start}
.why-delta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.why-delta-grid article{
  position:relative;
  min-height:180px;
  padding:22px;
  border:1px solid rgba(129,185,209,.14);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(8,31,47,.9),rgba(4,23,37,.96));
  transition:.22s ease;
}
.why-delta-grid article:hover{
  transform:translateY(-3px);
  border-color:rgba(237,126,35,.38);
}
.why-delta-grid b{
  display:block;
  margin-bottom:10px;
  color:#ed7e23;
  font-size:12px;
  letter-spacing:.08em;
}
.why-delta-grid h3{
  margin:0 0 8px;
  color:#fff;
}
.why-delta-grid p{
  margin:0;
  color:#9fb6c0;
}

/* Typography inside Sophos: slightly more generous */
#cybersecurity .sophos-partner-copy p{font-size:15px !important}
#cybersecurity .sophos-service-grid strong{font-size:14px !important}
#cybersecurity .sophos-service-grid small{font-size:11.5px !important;line-height:1.5 !important}
#cybersecurity .sophos-trust-row strong{font-size:13px !important}
#cybersecurity .sophos-trust-row small{font-size:11px !important}

/* ---------- Responsive typography ---------- */
@media(max-width:1180px){
  .nav a{font-size:14.5px !important}
  .desktop-profile{display:none !important}
  .partner-credential-grid{grid-template-columns:1fr 1fr}
  .partner-credential-grid .msp-credential{grid-column:1/-1}
  .why-delta-shell{grid-template-columns:1fr}
}
@media(max-width:900px){
  body{font-size:16px !important}
  .section-head h2,.section h2{font-size:clamp(31px,5vw,42px)}
  .section-head>p{font-size:16px !important}
  .partner-credential-grid{grid-template-columns:1fr}
  .partner-credential-grid .msp-credential{grid-column:auto}
  .partner-card{min-height:0}
  .profile-download-band{align-items:flex-start;flex-direction:column}
  .profile-download-band .btn{width:100%}
}
@media(max-width:680px){
  body{font-size:15.5px !important}
  .hero-copy h1{font-size:clamp(31px,9.5vw,44px) !important}
  .hero-copy>p{font-size:16px !important}
  .section-head h2,.section h2{font-size:30px}
  .section-head>p{font-size:15.5px !important}
  .card h3,.digital-card h3,.industry h3,.success-card h3,
  .client-card h3,.partner-card h3,.why-delta-grid h3{font-size:18px !important}
  .card p,.digital-card p,.industry p,.success-card p,
  .client-card p,.partner-card p,.why-delta-grid p{font-size:14.5px !important}
  .profile-hero-btn{display:none !important}
  .microsoft-credential{grid-template-columns:1fr}
  .microsoft-symbol{width:64px;height:64px}
  .partner-card{padding:20px;border-radius:20px}
  .credential-media{height:132px}
  .why-delta-intro{padding:25px 20px}
  .why-delta-intro h2{font-size:30px}
  .why-delta-grid{grid-template-columns:1fr}
  .why-delta-grid article{min-height:0}
}
@media(max-width:390px){
  .section-head h2,.section h2,.why-delta-intro h2{font-size:27px}
  .profile-download-band{padding:19px 16px}
}

/* touch devices */
@media(hover:none) and (pointer:coarse){
  .partner-card:hover,.why-delta-grid article:hover{transform:none}
}

/* Header density after adding Partners / Why Delta */
@media(max-width:1420px){
  .nav{gap:15px !important}
  .nav a{font-size:14px !important}
  .desktop-profile{display:none !important}
  .nav-actions{gap:8px !important}
}


/* =========================================================
   Corporate typography refinement — cleaner header,
   calmer scale, closer to enterprise IT websites
   ========================================================= */

/* Overall type rhythm */
body{
  font-size:15.5px !important;
  line-height:1.62 !important;
}
.eyebrow{
  font-size:12px !important;
  letter-spacing:.03em !important;
}
.section-head h2,
.section h2{
  font-size:clamp(30px,3.0vw,42px) !important;
  line-height:1.16 !important;
  letter-spacing:-.02em !important;
}
.section-head>p{
  font-size:15.5px !important;
  line-height:1.7 !important;
}
.card h3,.digital-card h3,.industry h3,.success-card h3,
.client-card h3,.partner-card h3,.why-delta-grid h3{
  font-size:17.5px !important;
}
.card p,.digital-card p,.industry p,.success-card p,
.client-card p,.partner-card p,.why-delta-grid p{
  font-size:14.5px !important;
  line-height:1.58 !important;
}
.btn{
  font-size:14px !important;
  min-height:42px !important;
  padding:10px 16px !important;
}
.btn-lg{
  font-size:15px !important;
  min-height:46px !important;
}

/* Hero - less oversized, more corporate */
.hero-copy h1{
  font-size:clamp(39px,4.45vw,62px) !important;
  line-height:1.07 !important;
  letter-spacing:-.03em !important;
}
.hero-copy>p{
  font-size:clamp(16px,1.25vw,18px) !important;
  line-height:1.68 !important;
}
.hero-badges span{
  font-size:11.5px !important;
}

/* Header / nav - single line, tighter */
.header .container.nav-wrap{
  max-width:1320px !important;
}
.nav-wrap{
  gap:18px !important;
}
.nav{
  gap:13px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}
.nav a{
  font-size:13.5px !important;
  font-weight:750 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  padding:8px 5px !important;
}
.nav-actions{
  gap:7px !important;
  flex-shrink:0 !important;
}
.language-btn{
  min-height:40px !important;
  padding:8px 12px !important;
  font-size:13.5px !important;
}
.desktop-profile{
  min-height:40px !important;
  padding:8px 12px !important;
  font-size:13px !important;
  border-radius:12px !important;
  white-space:nowrap !important;
}
.desktop-cta{
  min-height:40px !important;
  padding:8px 14px !important;
  font-size:13px !important;
  border-radius:12px !important;
  white-space:nowrap !important;
}
.brand-main{
  max-height:46px !important;
}
.brand-mark{
  max-height:34px !important;
}

/* Top bar calmer */
.topbar,.topbar a{
  font-size:12.5px !important;
}
.top-quote{
  min-height:36px !important;
  padding:7px 13px !important;
  font-size:12.5px !important;
}

/* Contact / form */
.contact-section h2{
  font-size:clamp(31px,3.1vw,43px) !important;
}
.contact-section p{
  font-size:15px !important;
}
input,textarea,select,label{
  font-size:15px !important;
}

/* Sophos content slightly tighter */
#cybersecurity .sophos-partner-copy h2{
  font-size:clamp(28px,2.8vw,42px) !important;
}
#cybersecurity .sophos-partner-lines strong{
  font-size:clamp(16px,1.35vw,21px) !important;
}
#cybersecurity .sophos-partner-copy h3{
  font-size:clamp(17px,1.45vw,22px) !important;
}
#cybersecurity .sophos-partner-copy p{
  font-size:14px !important;
}
#cybersecurity .sophos-service-grid strong{
  font-size:13px !important;
}
#cybersecurity .sophos-service-grid small{
  font-size:10.5px !important;
}

/* Why Delta / Partners */
.why-delta-intro h2{
  font-size:clamp(30px,3vw,41px) !important;
}
.why-delta-intro p{
  font-size:15px !important;
}
.partner-card h3{
  font-size:17px !important;
}
.partner-card p{
  font-size:14px !important;
}

/* Responsive header behavior */
@media(max-width:1360px){
  .nav{gap:10px !important}
  .nav a{font-size:12.8px !important;padding-inline:4px !important}
  .desktop-profile{display:none !important}
  .desktop-cta{font-size:12.8px !important;padding-inline:12px !important}
}
@media(max-width:1180px){
  .nav{display:none !important}
  .menu-btn{display:flex !important}
  .desktop-cta{display:none !important}
  .desktop-profile{display:none !important}
}
@media(max-width:900px){
  body{font-size:15px !important}
  .section-head h2,.section h2{font-size:clamp(28px,4.8vw,38px) !important}
  .hero-copy h1{font-size:clamp(34px,7vw,48px) !important}
}
@media(max-width:680px){
  body{font-size:14.8px !important}
  .hero-copy h1{font-size:clamp(29px,9vw,40px) !important}
  .hero-copy>p{font-size:15.2px !important}
  .section-head h2,.section h2{font-size:28px !important}
  .card h3,.digital-card h3,.industry h3,.success-card h3,
  .client-card h3,.partner-card h3,.why-delta-grid h3{
    font-size:17px !important;
  }
  .card p,.digital-card p,.industry p,.success-card p,
  .client-card p,.partner-card p,.why-delta-grid p{
    font-size:14px !important;
  }
}


/* =========================================================
   Sticky header + CTA clipping fix
   ========================================================= */

/* Keep only the main navigation sticky, not the top contact bar */
.header{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
  width:100% !important;
  background:rgba(2,14,25,.97) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(131,182,204,.13);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}

/* Prevent nav/header content from exceeding viewport width */
.header .container.nav-wrap{
  width:min(100% - 24px, 1420px) !important;
  max-width:none !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
}
.brand{
  flex:0 0 auto !important;
}
.nav{
  flex:1 1 auto !important;
  min-width:0 !important;
  justify-content:center !important;
}
.nav-actions{
  flex:0 0 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

/* Keep action buttons compact and fully visible */
.language-btn,
.desktop-profile,
.desktop-cta{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  max-width:100% !important;
}
.desktop-profile{
  padding:8px 11px !important;
}
.desktop-cta{
  padding:8px 12px !important;
  min-width:auto !important;
  max-width:190px !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Give a little breathing room on the far right/left */
html[dir="ltr"] .nav-actions{padding-right:4px !important}
html[dir="rtl"] .nav-actions{padding-left:4px !important}

/* Slightly tighter desktop nav before hamburger breakpoint */
@media (max-width:1440px){
  .header .container.nav-wrap{
    width:min(100% - 20px, 1360px) !important;
    gap:10px !important;
  }
  .nav{gap:9px !important}
  .nav a{
    font-size:12.6px !important;
    padding-inline:3px !important;
  }
  .language-btn{
    font-size:12.8px !important;
    padding-inline:10px !important;
  }
  .desktop-profile{
    font-size:12.4px !important;
    padding-inline:10px !important;
  }
  .desktop-cta{
    font-size:12.4px !important;
    padding-inline:11px !important;
    max-width:170px !important;
  }
}

/* At medium laptop widths, prioritize CTA and avoid clipping */
@media (max-width:1280px){
  .desktop-profile{
    display:none !important;
  }
  .nav{
    gap:8px !important;
  }
  .nav a{
    font-size:12.2px !important;
  }
  .desktop-cta{
    max-width:165px !important;
  }
}

/* Switch to hamburger sooner, before any crowding starts */
@media (max-width:1120px){
  .nav{display:none !important}
  .menu-btn{display:flex !important}
  .desktop-profile{display:none !important}
  .desktop-cta{display:inline-flex !important}
}

/* Smaller tablets/phones: keep CTA out of the header to save space */
@media (max-width:760px){
  .desktop-cta{display:none !important}
  .header .container.nav-wrap{
    width:calc(100% - 18px) !important;
  }
}

/* iPhone safe areas */
@supports (padding: max(0px)){
  .header{
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
  }
}


/* =========================================================
   TRUE FREEZE HEADER — topbar + navigation stay on screen
   ========================================================= */
:root{
  --drs-topbar-h:58px;
  --drs-header-h:82px;
}

/* Freeze contact/top strip */
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1200 !important;
  min-height:var(--drs-topbar-h) !important;
  background:#020e19 !important;
  border-bottom:1px solid rgba(129,185,209,.10) !important;
}

/* Freeze main navigation immediately below it */
.header{
  position:fixed !important;
  top:var(--drs-topbar-h) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1190 !important;
  min-height:var(--drs-header-h) !important;
  background:rgba(2,14,25,.985) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  border-bottom:1px solid rgba(129,185,209,.14) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
}

/* Reserve physical space so page content never hides behind frozen bars */
body{
  padding-top:calc(var(--drs-topbar-h) + var(--drs-header-h)) !important;
}
main{
  position:relative;
  z-index:1;
}

/* Anchor navigation lands below frozen header */
section[id],div[id]{
  scroll-margin-top:calc(var(--drs-topbar-h) + var(--drs-header-h) + 18px) !important;
}

/* Keep dropdowns above content */
.language-menu,.nav.open{
  z-index:1300 !important;
}

/* Tablet: freeze only compact navigation; topbar can be removed from flow */
@media(max-width:900px){
  :root{
    --drs-topbar-h:0px;
    --drs-header-h:72px;
  }
  .topbar{
    display:none !important;
  }
  .header{
    top:0 !important;
    min-height:72px !important;
  }
  body{
    padding-top:72px !important;
  }
  section[id],div[id]{
    scroll-margin-top:88px !important;
  }
}

/* Phone */
@media(max-width:680px){
  :root{--drs-header-h:66px}
  .header{min-height:66px !important}
  body{padding-top:66px !important}
  section[id],div[id]{scroll-margin-top:80px !important}
}

/* iPhone safe-area support */
@supports (padding: max(0px)){
  @media(max-width:900px){
    .header{
      padding-top:env(safe-area-inset-top) !important;
    }
    body{
      padding-top:calc(72px + env(safe-area-inset-top)) !important;
    }
  }
}

/* ByMe Google Play download actions */
.byme-client .byme-copy{min-width:0}
.byme-downloads{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.store-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:9px 13px;
  border:1px solid rgba(237,126,35,.24);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(237,126,35,.08),rgba(255,255,255,.025));
  color:#fff;
  text-decoration:none;
  transition:.22s ease;
}
.store-link:hover{
  transform:translateY(-2px);
  border-color:rgba(237,126,35,.58);
  background:rgba(237,126,35,.12);
}
.store-link .store-icon{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:9px;
  background:#ed7e23;
  color:#fff;
  font-size:13px;
  flex:0 0 auto;
}
.store-link>span:last-child{
  display:flex;
  flex-direction:column;
  line-height:1.12;
}
.store-link small{
  color:#9fb6c0;
  font-size:10px;
  margin-bottom:3px;
}
.store-link strong{
  color:#fff;
  font-size:12.5px;
  white-space:nowrap;
}
.store-link-all{
  border-color:rgba(97,181,221,.22);
  background:rgba(3,49,61,.34);
}
.store-link-all .store-icon{background:#0a6f9d}
@media(max-width:780px){
  .byme-downloads{flex-direction:column}
  .store-link{width:100%;justify-content:flex-start}
  .store-link strong{white-space:normal}
}

/* ByMe developer button compact fix */
.byme-downloads .store-link-all{
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:7px 10px !important;
  gap:8px !important;
}
.byme-downloads .store-link-all .store-icon{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  font-size:11px !important;
}
.byme-downloads .store-link-all>span:last-child{
  min-width:0 !important;
  max-width:100% !important;
}
.byme-downloads .store-link-all small{
  font-size:8.5px !important;
  line-height:1.1 !important;
}
.byme-downloads .store-link-all strong{
  font-size:10.5px !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
@media(max-width:780px){
  .byme-downloads .store-link-all{
    width:100% !important;
  }
}