/* Stonebridge Digital: the Techvio look on the SB Commerce starter.
   Loaded last, after the starter's styles.css and the Techvio files in
   /assets/techvio/. Brand colours and fonts are set here. */

/* ---- Fonts, bundled (Fontsource, SIL Open Font License; see credits.txt) ---- */
@font-face{font-family:'Catamaran';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/techvio/fonts/catamaran-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Catamaran';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/techvio/fonts/catamaran-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Dosis';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/techvio/fonts/dosis-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Dosis';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/techvio/fonts/dosis-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Brand ---- */
body.sb-site{
  --brand:#0052c7; --brand-dark:#003e99; --navy:#293440; --accent-text:#0052c7; --accent-bright:#cfe3ff;
  --paper:#fff; --ink:#293440; --muted:#5f5f5f; --accent:#0052c7; --soft:#eef4fc; --line:#e4e4ef; --focus:#ff9800;
  --display:'Catamaran',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-family:var(--display); color:#2b2b3a; font-size:16px; background:#fff;
}
/* Match Techvio: Dosis headings at normal spacing (the starter tightens h1/h2), Catamaran text with a little air. */
body.sb-site h1,body.sb-site h2,body.sb-site h3,body.sb-site h4,body.sb-site h5,body.sb-site h6{font-family:'Dosis',var(--display);font-weight:700;line-height:1.4;letter-spacing:normal}
body.sb-site p{letter-spacing:.3px;line-height:1.8}

/* Readable contrast: Techvio's orange labels and links are darkened on light backgrounds. */
.sb-eyebrow{font:600 15px/1.5 'Catamaran',sans-serif;letter-spacing:2.5px;text-transform:uppercase;margin:0 0 10px}
.section-title h6,.overview-content h6,.about-content h6,.sb-eyebrow{color:var(--accent-text)}
.single-services-item .services-btn-link .services-link{color:var(--brand)}
.hire-content h6,.sb-process .sb-eyebrow,.page-title-content .sb-eyebrow{color:var(--accent-bright)}

/* Keyboard focus: Techvio removes outlines; put a clear one back. */
body.sb-site a:focus-visible,body.sb-site button:focus-visible,body.sb-site input:focus-visible,body.sb-site select:focus-visible,body.sb-site textarea:focus-visible,body.sb-site summary:focus-visible{outline:3px solid var(--focus)!important;outline-offset:3px}
.skip-link{z-index:1001}

/* The Demo / sample banner stays above the header. */
#mode-banner{position:relative;z-index:1000;background:var(--navy)}

/* ---- Header ---- */
.navbar-area{top:auto}
.navbar-area.is-sticky{top:0}
.sb-navbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:20px}
.sb-brand{display:flex;align-items:center;gap:10px;color:#fff;margin:0;padding:0}
.sb-brand:hover,.sb-brand:focus{color:#fff}
.sb-brand-mark{display:block;background:#fff;border-radius:8px;padding:4px 6px;line-height:0}
.sb-brand-mark img{display:block;height:36px;width:auto}
/* The name, cut from the owner's logo so lettering and colours match exactly. On the dark
   header it is white (-ondark); on the white sticky header, the logo navy (-onlight). */
.sb-brand-word{display:block;height:30px;width:auto}
.sb-on-light{display:none}
@media (min-width:992px){
  .sb-brand-word{height:34px}
  .navbar-area.is-sticky .sb-on-dark{display:none}
  .navbar-area.is-sticky .sb-on-light{display:block}
}
.navbar-area.is-sticky .sb-brand{color:var(--navy)}
.sb-menu{display:flex;align-items:center;gap:30px}
.sb-menu a,.sb-menu .dropdown-menu a{text-transform:none}
.techvio-nav .navbar .navbar-nav{flex-direction:row;align-items:center}
.techvio-nav .navbar .navbar-nav .nav-item:has(> a[hidden]){display:none}
.techvio-nav .navbar .navbar-nav .nav-item a[aria-current=page]{color:#c9c2ff}
.navbar-area.is-sticky .techvio-nav .navbar .navbar-nav .nav-item a[aria-current=page]{color:var(--brand)}
/* Sub-menus open on hover and on keyboard focus. */
.techvio-nav .navbar .navbar-nav .nav-item:hover>.dropdown-menu,.techvio-nav .navbar .navbar-nav .nav-item:focus-within>.dropdown-menu{opacity:1;visibility:visible;top:100%}
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a{color:var(--navy)!important}
.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover,.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus,.techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a[aria-current=page]{color:var(--brand)!important}
.techvio-nav .navbar .other-option .default-btn{white-space:nowrap}
.sb-menu-toggle{display:none;background:transparent;border:0;width:44px;height:44px;padding:10px;color:#fff;margin-left:auto}
.navbar-area.is-sticky .sb-menu-toggle{color:var(--navy)}
.sb-bars,.sb-bars::before,.sb-bars::after{display:block;width:24px;height:2px;background:currentColor;position:relative;transition:.3s}
.sb-bars::before,.sb-bars::after{content:'';position:absolute;left:0}
.sb-bars::before{top:-7px}.sb-bars::after{top:7px}
.sb-menu-toggle[aria-expanded=true] .sb-bars{background:transparent}
.sb-menu-toggle[aria-expanded=true] .sb-bars::before{top:0;transform:rotate(45deg)}
.sb-menu-toggle[aria-expanded=true] .sb-bars::after{top:0;transform:rotate(-45deg)}
.sb-cart:empty{display:none}

@media (max-width:1199px){
  .techvio-nav .navbar .navbar-nav .nav-item a{margin-left:10px;margin-right:10px}
  .sb-menu{gap:16px}
}
@media (max-width:991px){
  .navbar-area{padding:0;background:rgba(11,11,49,.92)}
  .navbar-area.is-sticky{padding:0}
  .techvio-nav{display:block!important;padding:12px 0}
  .sb-menu-toggle{display:block}
  .sb-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 20px;box-shadow:0 12px 24px rgba(0,0,0,.15);max-height:calc(100vh - 70px);overflow:auto}
  .sb-menu.open{display:flex}
  .sb-navbar{position:static}
  .techvio-nav .container{position:relative}
  .techvio-nav .navbar .navbar-nav{flex-direction:column;align-items:stretch;margin:0}
  .techvio-nav .navbar .navbar-nav .nav-item{padding:0;border-bottom:1px solid #eee}
  .techvio-nav .navbar .navbar-nav .nav-item a{display:block;color:var(--navy)!important;margin:0!important;padding:12px 0!important}
  .techvio-nav .navbar .navbar-nav .nav-item a[aria-current=page]{color:var(--brand)!important}
  .techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu{position:static;opacity:1;visibility:visible;box-shadow:none;width:auto;padding-left:16px!important;background:transparent}
  .techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li{border:0}
  .techvio-nav .navbar .navbar-nav .nav-item .dropdown-menu li a{padding:8px 0!important;font-size:15px}
  .techvio-nav .navbar .other-option{margin-top:16px}
  .techvio-nav .navbar .other-option .default-btn{display:block}
  .navbar-area.is-sticky .sb-brand{color:#fff}
  .navbar-area.is-sticky{background:var(--navy)!important}
  .navbar-area.is-sticky .sb-menu-toggle{color:#fff}
}
@media (max-width:480px){.sb-brand{gap:8px}.sb-brand-mark img{height:30px}.sb-brand-word{height:25px}}

/* ---- Hero ---- */
.home-area{height:auto;min-height:0;padding:100px 0 55px}
.main-banner-content h1{font-size:55px;margin-bottom:12px}
.home-area .banner-image img{max-height:300px;width:auto;display:block;margin:0 auto}
.home-area .creative-shape img{width:100%;height:60px}
.main-banner-content .sb-eyebrow{color:#cfe3ff;font:600 15px/1.5 'Catamaran',sans-serif;letter-spacing:2.5px;word-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.main-banner-content p{font-size:17px;color:#fff;margin-bottom:18px}
.main-banner-content .banner-btn{display:flex;flex-wrap:wrap;gap:14px}
.main-banner-content .banner-btn a{margin:0}
@media (max-width:991px){.home-area{padding:100px 0 70px}.main-banner-content h1{font-size:42px}.home-area .banner-image{display:none}}
@media (max-width:575px){.main-banner-content h1{font-size:35px}.home-area .creative-shape img{height:40px}}

/* ---- Inner page title ---- */
.page-title-area{height:auto;padding:100px 0 12px}
.page-title-content{margin-top:0}
.page-title-content h1{margin-bottom:0;color:#fff;font-size:42px;font-weight:700}
.page-title-content p.sb-lead{color:#fff;font-size:17px;max-width:720px;margin:6px auto 0}
.page-title-content ul{margin-top:6px}
.page-title-content ul li::before{background-color:#c9c2ff}
@media (max-width:767px){.page-title-area{padding:84px 0 16px}.page-title-content h1{font-size:35px}}
.sb-band{height:110px;background:linear-gradient(to right,#1d2733,#00429b,#0052c7)}
@media (max-width:991px){.sb-band{height:72px}}
.sb-app{padding-bottom:60px}

/* ---- Sections ---- */
.section-title h2{font-size:40px;color:var(--navy)}
@media (max-width:767px){.section-title h2{font-size:30px}}
.section-title p{max-width:680px;margin:12px auto 0}
.services-icon i{color:var(--brand)}
.single-services-item{height:calc(100% - 30px);display:flex;flex-direction:column}
.single-services-item .services-btn-link{margin-top:auto;padding-top:16px}
.overview-content h2{font-size:36px}
.overview-content .features-list li span{font-size:17px}
.overview-content .sb-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.overview-content .sb-actions a{margin:0}
@media (max-width:575px){.overview-content .features-list li{flex:0 0 100%;max-width:100%}}
.sb-link{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.sb-link:hover{color:var(--brand-dark)}

/* Process band: Techvio's counter area, used for steps instead of made-up numbers. */
.sb-process{position:relative;z-index:1;background:linear-gradient(to right,#1d2733,#00429b,#0052c7,#0060d0);color:#fff;padding:90px 0 60px}
.sb-process .section-title h2{color:#fff}
.sb-process .section-title p{color:#e8ecff}
.sb-step{text-align:left;margin-bottom:30px;padding:28px 24px;border:1px solid #e1e8f2;border-radius:6px;height:calc(100% - 30px);background:#fff}
.sb-step h3{color:var(--navy);font-size:22px;margin-bottom:8px}
.sb-step p{color:#4a4a5a;margin:0}
.sb-step .services-icon{font-size:30px;color:var(--brand);margin-bottom:12px}
.sb-process .sb-step{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.sb-step-number{font:800 40px/1 'Dosis',sans-serif;color:#cfe3ff;margin-bottom:10px}
.sb-process .sb-step h3{color:#fff}
.sb-process .sb-step p{color:#eef0ff}

/* Placeholders the owner fills in: a grey "Photo to come" box. */
.sb-photo-to-come{display:grid;place-items:center;aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#e8eef7 0 14px,#f3f6fb 14px 28px);border:1px dashed #aebfd9;border-radius:5px;color:#4b4b63;font:600 16px/1.4 'Dosis',sans-serif;text-align:center;padding:20px}
.sb-photo-to-come.square{aspect-ratio:1/1}
.sb-card{background:#fff;border-radius:5px;box-shadow:5px 7px 15px 2px rgba(82,90,101,.12);margin-bottom:30px;overflow:hidden;height:calc(100% - 30px)}
.sb-card .sb-photo-to-come{border-radius:0;border-width:0 0 1px}
.sb-card-body{padding:22px 24px}
.sb-card-body .sb-tag{display:inline-block;font:700 13px/1 'Dosis',sans-serif;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-text);margin-bottom:10px}
.sb-card-body h3{font-size:21px;margin-bottom:8px}
.sb-card-body p{margin:0}

/* Service detail pages */
.services-details-content h2{font-size:30px;margin-bottom:15px;color:var(--navy)}
.services-details-content h3{font-size:24px;margin:35px 0 12px;color:var(--navy)}
.services-details-content .features-text .service-features-list li{display:flex;align-items:center;width:100%;margin-right:0;margin-bottom:14px}
.services-details-content .features-text .service-features-list i{flex:0 0 30px}
@media (min-width:768px){.services-details-content .features-text .service-features-list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}}
.sb-steps-list{counter-reset:step;margin:10px 0 0}
.sb-steps-list li{counter-increment:step;position:relative;padding:0 0 18px 52px;color:#4a4a5a}
.sb-steps-list li::before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--brand);font:800 17px/1 'Dosis',sans-serif}
.sb-steps-list li strong{display:block;color:var(--navy);font-size:17px}
.services-widget .widget_categories ul li a[aria-current=page]{color:#fff;background-color:var(--navy);font-weight:700}
.sb-widget-cta p{margin-bottom:18px}
.sb-owner-note{border-left:3px solid #ffb020;background:#fff8ea;padding:16px 18px;border-radius:4px;color:#4a3a10;margin-top:30px}
.sb-owner-note p{color:#4a3a10;margin:0}

/* About + team */
.about-content h2{font-size:36px}
.team-info h3{font-size:20px}
.team-info span{color:#5f5f5f}

/* Contact */
.contact-info-content{height:calc(100% - 30px)}
.contact-info-content i{font-size:40px;color:var(--brand);display:block;margin-bottom:12px}
.contact-info-content p{color:#4a4a5a}
.sb-form-wrap{max-width:760px;margin:0 auto}
.sb-form-wrap .field input,.sb-form-wrap .field textarea,.sb-form-wrap .field select{border-radius:4px;border-color:#cfcde0}

/* Call to action: Techvio's hire band, without the template's background photo licence worry. */
.hire-section{background-image:linear-gradient(120deg,#1d2733,#00429b 55%,#0060d0)}
.hire-section::before{opacity:.25}
.hire-content .hire-btn{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hire-content .hire-btn a{margin:0!important}

/* ---- Footer ---- */
.sb-footer .footer-heading .h3{font-size:20px;color:#fff;font-weight:700;margin:0;padding-bottom:10px;border-bottom:1px solid #777}
.single-footer-widget .footer-quick-links li a:hover,.single-footer-widget .footer-quick-links li a:focus{color:#c9c2ff}
.single-footer-widget .footer-quick-links li:has(> a[hidden]){display:none}
.single-footer-widget .footer-info-contact span{color:#ececec}
.sb-copyright{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 30px}
.sb-copyright p{margin:0;color:#ececec}
.copyright-area .footer-policies{display:flex;flex-wrap:wrap;gap:6px 18px}
.copyright-area .footer-policies a{color:#ececec;font-size:15px}
.copyright-area .footer-policies a:hover,.copyright-area .footer-policies a:focus{color:#c9c2ff;text-decoration:underline}
.copyright-area .footer-seller{display:flex;flex-wrap:wrap;gap:4px 18px;margin:18px 0 0;padding-top:16px;border-top:1px solid #3a3a46;color:#cfcfda;font-size:14px}
.copyright-area .footer-seller span{color:#cfcfda}

/* Back to top */
.go-top{border:0;padding:0}

/* ---- Starter (shop, bag, blog) pages inside the Techvio shell ---- */
.sb-app .page-heading{padding:50px 0 26px}
.sb-app .button{background:var(--brand);border-color:var(--brand);border-radius:4px}
.sb-app .button:hover{background:var(--brand-dark);border-color:var(--brand-dark);filter:none;color:#fff}
.main-content{min-height:0}

/* Footer logo and contact links */
.sb-footer-logo{display:inline-block;background:#fff;border-radius:8px;padding:10px 14px;margin-bottom:18px;line-height:0}
.sb-footer-logo img{width:200px;height:auto}
.sb-footer .footer-info-contact a{color:#fff}
.sb-footer .footer-info-contact a:hover{color:#cfe3ff}
.sb-footer address{font-style:normal;margin:0}
.sb-step address{font-style:normal;color:#4a4a5a;margin:0}