/* NineSixteen responsive modernization — October 2026.
   Desktop >= 1200px retains the original design in base.css.
   Keep this file loaded AFTER base.css and responsive.css. */

/* Keyboard affordances: unchanged at rest. */
:focus-visible { outline: 3px solid #dd3f19; outline-offset: 3px; }
#footer a:focus-visible {outline-color:#fff;}
#project-section .project-menu .filter:focus-visible {outline-offset:4px;}

/* The original CSS forces a 1280px canvas; restore a natural viewport below desktop. */
@media (max-width: 1199px) {
  html, body { width:100%; min-width:0; max-width:100%; }
  html { overflow-x: clip; }
  body { overflow-x: hidden; background-attachment:scroll; }
  .container { width:100%; max-width:970px; padding-left:24px !important; padding-right:24px !important; }
  #project-section .project-gallery .grid-item {width:50%;}
  #about {padding:75px 40px; margin-top:65px;}
  .page-middle-banner {background-attachment:scroll;}
}

/* For tablets and phones the original fixed-width navbar is replaced with a
   small accessible menu. On wider viewports, legacy desktop scrolling remains. */
.mobile-nav-toggle {display:none;}
@media (max-width: 1100px) {
  body {padding-top:58px;}
  #navWrap {height:0;}
  #navWrap nav {
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    width:100% !important; margin:0 !important;
    z-index:10000; min-height:58px;
    text-align:left;
    box-shadow:0 3px 12px rgba(0,0,0,.18);
  }
  .mobile-nav-toggle {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:fixed; z-index:10001; top:0; left:0;
    width:100%; height:58px; padding:0 22px;
    border:0; background:#3e3e3e url('../images/grey-texture.gif');
    color:#fff; font:700 14px Helvetica,Arial,sans-serif;
    letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  }
  .mobile-nav-toggle .nav-bars {display:grid; gap:5px; flex-shrink:0;}
  .mobile-nav-toggle .nav-bars span {width:23px; height:2px; background:#fff; display:block; transition:transform .25s ease,opacity .25s ease;}
  .mobile-nav-toggle[aria-expanded="true"] .nav-bars span:first-child {transform:translateY(7px) rotate(45deg);}
  .mobile-nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(2) {opacity:0;}
  .mobile-nav-toggle[aria-expanded="true"] .nav-bars span:last-child {transform:translateY(-7px) rotate(-45deg);}
  #navWrap nav ul {
    display:none; position:absolute; top:58px; left:0; right:0;
    margin:0; padding:8px 16px 14px;
    max-height:calc(100dvh - 58px); overflow-y:auto;
    background:#3e3e3e url('../images/grey-texture.gif');
    box-shadow:0 15px 18px rgba(0,0,0,.23);
  }
  #navWrap.nav-open nav ul {display:block;}
  #navWrap nav li {float:none; display:block; padding:0; margin:0;}
  #navWrap nav li a {display:block; padding:14px 12px; color:#fff; min-height:44px; font-size:14px;}
  #navWrap nav li a:hover, #navWrap nav li a:focus-visible {color:#dd3f19;}
  #navWrap nav br.clearLeft {display:none;}
  #header .tagline {max-width:calc(100vw - 38px);}
  #logo {min-height:490px;}
  #about {margin-top:0;}
  #service-section, #project-section, #blog-section, #contact-section, .inner-page-banner {scroll-margin-top:72px;}
}

@media (max-width: 767px) {
  .container {padding-left:20px !important; padding-right:20px !important; max-width:100%;}
  #logo {min-height:390px; background-position:center center;}
  #header .tagline {
    width:320px; height:320px; left:50%; top:50%;
    margin-left:-160px; margin-top:-160px;
    background-size:contain; background-repeat:no-repeat;
  }
  #header .tagline .logo {top:18px;}
  #about {padding:65px 24px 70px; margin-bottom:32px;}
  #about h1 {font-size:clamp(26px,6vw,36px);}
  #about h2 {font-size:clamp(17px,4vw,22px); line-height:1.45;}
  #about p {font-size:15px; line-height:1.75;}
  #service-section {padding-bottom:40px;}
  .theme-title {margin-top:65px;}
  .theme-title h2 {font-size:clamp(26px,7vw,36px); line-height:1.25;}
  .theme-title p {width:100%; max-width:620px; font-size:15px; line-height:1.65; margin-top:45px;}
  #service-section .row, #blog-section .clear-fix {margin-left:0; margin-right:0;}
  #service-section .row [class*="col-"] {float:none; width:100%; padding-left:0; padding-right:0;}
  #service-section .single-service-content {margin-bottom:22px;}
  #project-section .project-menu ul {margin:26px auto 30px;}
  #project-section .project-menu ul li {
    min-height:44px; display:inline-flex; align-items:center; padding:7px 10px;
    margin:3px 2px; font-size:13px; line-height:1.2;
  }
  #project-section .project-gallery {margin-left:-7px; margin-right:-7px;}
  #project-section .project-gallery .grid-item {float:left; width:50%; padding:0 7px; margin-bottom:14px;}
  #project-section .project-gallery .single-img img {display:block; width:100%; height:auto;}
  #project-section .project-gallery .single-img .opacity .border-shape {inset:9px;}
  #project-section .project-gallery .single-img .opacity h6 {line-height:1.25;}
  #project-section .project-gallery .single-img .opacity h6 a {font-size:clamp(11px,2.4vw,15px);}
  #project-section .project-gallery .single-img .opacity ul {margin-top:4px;}
  #project-section .project-gallery .single-img .opacity ul li {font-size:11px; margin:0 1px;}
  .page-middle-banner {margin-top:40px;}
  .page-middle-banner .opacity {padding:75px 20px 80px;}
  .page-middle-banner .opacity h3 {font-size:clamp(20px,5vw,28px); line-height:1.4;}
  #blog-section .clear-fix [class*="col-"] {padding-left:0; padding-right:0;}
  #blog-section .single-news-item {margin:25px auto 35px; max-width:570px;}
  #blog-section .single-news-item .img img {width:100%; height:auto;}
  #blog-section .single-news-item .post h6 a {margin-top:24px;}
  #contact-section {min-height:0; padding-bottom:70px; background-position:center;}
  #contact-section .send-message {padding:0 20px; max-width:720px; margin:0 auto;}
  #contact-section .send-message .row {margin-left:-8px; margin-right:-8px;}
  #contact-section .send-message .row [class*="col-"] {width:100%; float:none; padding-left:8px; padding-right:8px;}
  #contact-section .send-message .single-input {height:50px; margin-bottom:14px;}
  #contact-section .send-message input,
  #contact-section .send-message textarea {font-size:16px;}
  #contact-section .send-message form textarea {min-height:170px; max-height:none; resize:vertical;}
  #contact-section .send-message form button {min-height:46px; cursor:pointer;}
  #footer {padding:26px 20px; line-height:1.8;}
  #footer ul li {margin-bottom:8px;}
  #footer ul li a {min-height:45px;}
  .scroll-top {bottom:17px; right:15px; width:44px; height:44px;}
  /* Blog detail pages */
  .inner-page-banner {margin-bottom:45px;}
  .inner-page-banner .opacity {padding:72px 15px 58px;}
  .inner-page-banner .opacity h2 {font-size:32px;}
  .blog-details-page .container {width:100%;}
  .blog-details-page .row [class*="col-"] {float:none; width:100%;}
  .blog-details-page aside {margin-top:55px;}
  .blog-details-post-wrapper, .blog-details-page aside {min-width:0; overflow-wrap:break-word;}
  .blog-details-post-wrapper img, .blog-details-page img {max-width:100%; height:auto;}
  .blog-details-post-wrapper .post-heading h4 {font-size:clamp(21px,5vw,28px);}
  .blog-details-post-wrapper .post-share-area ul {max-width:100%;}
}
@media (max-width:550px) {
  #logo {min-height:345px;}
  #header .tagline {width:min(300px, calc(100vw - 36px)); height:min(300px, calc(100vw - 36px)); margin-left:0; margin-top:0; transform:translate(-50%,-50%);}
  #project-section .project-gallery .grid-item {width:100%; padding:0 7px;}
  #project-section .project-gallery .single-img {max-width:490px; margin:0 auto;}
  #project-section .project-gallery .single-img .opacity .border-shape {inset:14px;}
  #project-section .project-gallery .single-img .opacity h6 a {font-size:clamp(14px,4.2vw,18px);}
  #project-section .project-gallery .single-img .opacity ul li {font-size:12px;}
}

/* Touch / keyboard access to the ORIGINAL project overlay; hover stays untouched. */
#project-section .project-gallery .single-img.is-revealed .opacity,
#project-section .project-gallery .single-img:focus-within .opacity {
  opacity:1; transform:scale(1);
}
#project-section .project-gallery .single-img.is-revealed .opacity ul,
#project-section .project-gallery .single-img.is-revealed .opacity h6 a,
#project-section .project-gallery .single-img:focus-within .opacity ul,
#project-section .project-gallery .single-img:focus-within .opacity h6 a {
  opacity:1; transform:translate3d(0,0,0);
}
#project-section .project-gallery .single-img.is-revealed img {transform:scale3d(1.15,1.15,1);}
@media (hover:none) and (pointer:coarse) {
  #service-section .single-service-content:active .icon-heading,
  #service-section .single-service-content:focus-within .icon-heading {border-color:#dd3f19;}
  #footer ul li a:active {background:rgba(0,0,0,.18);}
}
/* Make focus states match desktop hover colours for existing social icons. */
#footer ul li:nth-child(1) a:focus-visible {background:#677fb5;}
#footer ul li:nth-child(2) a:focus-visible {background:#70c2e9;}
#footer ul li:nth-child(3) a:focus-visible {background:#007ab9;}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {scroll-behavior:auto;}
  #preloader_1 span {animation-duration:.01ms; animation-iteration-count:1;}
  #project-section .project-gallery .single-img img,
  #project-section .project-gallery .single-img .opacity,
  #blog-section .single-news-item .img img {transition:none;}
}

/* Contact-form PHP acknowledgement page, which uses a standalone #masthead nav. */
@media (max-width: 1100px) {
  #masthead nav {width:100% !important; position:relative !important; left:auto !important; top:auto !important;}
  #masthead nav ul {display:flex; flex-wrap:wrap; justify-content:center; padding:12px 9px;}
  #masthead nav li {float:none; margin:2px 5px;}
  #masthead nav li a {padding:8px; min-height:40px;}
  #confirmation {height:auto; min-height:360px; padding:80px 22px;}
  #confirmation h2 {line-height:1.3; font-size:clamp(23px,5vw,32px);}
}


/* V2: Projects must NEVER be invisible just because the legacy gallery plugin
   missed its DOM-ready event. Inline visibility from a successfully running
   MixItUp filter continues to take precedence over this default. */
#project-section .project-gallery .grid-item { display:block; }
#project-section .project-gallery .grid-item[hidden] { display:none !important; }

/* Desktop navigation: recreate the original floating/sticky scroll behavior
   while leaving the original charcoal/orange styling otherwise intact. */
@media (min-width:1101px) {
  #navWrap nav.nine16-is-sticky {
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    width:100% !important; margin:0 !important;
    z-index:10010;
    box-shadow:0 5px 18px rgba(0,0,0,.22);
  }
  #navWrap nav a.nine16-active {color:#dd3f19;}
}

/* Restore the original fixed-background parallax feel on desktop-class devices,
   including narrower desktop browser windows. Keep scrolling backgrounds on
   touch devices to avoid mobile Safari performance/jank issues. */
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
  body {background-attachment:fixed;}
  .page-middle-banner {background-attachment:fixed;}
}