/* Shared mobile and tablet safeguards. Loaded after each page stylesheet. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; }

@media (max-width: 900px) {
  .site-header, .admin-header { min-height: auto; }
  .site-header .nav-wrap { width: min(100%, 1180px); padding: 12px 18px; gap: 12px; flex-wrap: wrap; }
  .site-header nav { display: flex !important; width: 100%; max-width: 100%; overflow-x: auto; gap: 4px; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .site-header nav a { flex: 0 0 auto; min-height: 38px; display: inline-flex !important; align-items: center; white-space: nowrap; }
  .admin-header { padding: 14px 18px !important; gap: 12px; flex-wrap: wrap; }
  .admin-header .header-right, .admin-header .admin-header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
  .admin-page, .account-page { width: min(100% - 32px, 1180px) !important; }
  .admin-page { padding-top: 38px !important; padding-bottom: 38px !important; }
  .control-bar { flex-wrap: wrap; }
  .control-bar input { min-width: min(100%, 280px); flex: 1 1 240px; }
}

@media (max-width: 600px) {
  .site-header .nav-wrap { padding-inline: 14px; }
  .site-header .logo, .admin-header .logo { font-size: 14px; }
  .site-header nav { margin-inline: -2px; }
  .site-header nav a { font-size: 10px !important; padding-inline: 10px !important; }
  .admin-header .header-right, .admin-header .admin-header-right { width: 100%; justify-content: space-between; margin-left: 0; }
  .admin-header .admin-header-right > span { display: none; }
  .admin-page, .account-page { width: min(100% - 24px, 1180px) !important; }
  .admin-page h1, .account-page h1 { letter-spacing: -1px; }
  .control-bar > * { width: 100%; }
  .control-bar .admin-btn { justify-content: center; }
  .order-top, .customer-info, .order-details, .order-edit { grid-template-columns: 1fr !important; }
  .order-top { gap: 12px; }
  .order-top .status { justify-self: start; }
  .order-card, .admin-card, .account-card { min-width: 0; }
  .order-edit label, .order-edit input, .order-edit select { min-width: 0; width: 100%; }
  table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ===== SILENT KILLER: UNIVERSAL TABLET + PHONE NAVIGATION ===== */
.hamburger {
  width: 42px;
  height: 38px;
  padding: 8px 9px;
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(32,168,92,.45);
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 2px;
}
.hamburger span { display:block; width:100%; height:2px; background:currentColor; transition:.2s ease; }
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (min-width: 901px){
  .nav-container { position: relative; }
  .nav-container > .hamburger { margin-left: 12px; }
}

@media (max-width: 900px){
  .nav-container { position:relative; align-items:center; }
  .nav-container > .hamburger { margin-left:auto; }
  .nav-container .nav {
    display:none !important;
    width:100%;
    order:10;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin-top:8px;
    padding:8px;
    background:#101513;
    border:1px solid rgba(32,168,92,.25);
    box-shadow:0 16px 30px rgba(0,0,0,.2);
  }
  .nav-container .nav.active { display:flex !important; }
  .nav-container .nav a { width:100%; min-height:42px; justify-content:flex-start; }
}

@media (min-width: 901px){
  .site-header .nav-container > .hamburger + .nav { }
}

/* Better tablet layouts */
@media (min-width: 601px) and (max-width: 1024px){
  .container, .nav-container, .admin-page, .account-page { width:min(94%, 960px) !important; }
  .admin-cards { grid-template-columns:repeat(2,1fr) !important; }
  .media-grid, .media-grid-inner { grid-template-columns:repeat(2,1fr) !important; }
  .form-grid, .blog-form { grid-template-columns:repeat(2,1fr) !important; }
  .product-grid, .why-grid, .quality-grid, .services-grid { grid-template-columns:repeat(2,1fr) !important; }
  .hero-in, .about-hero, .capability-hero, .quality-hero { grid-template-columns:1fr 1fr !important; }
}

@media (max-width: 600px){
  .nav-container { padding-left:14px !important; padding-right:14px !important; }
  .nav-container .logo { max-width:170px; overflow:hidden; }
  .nav-container .logo img { max-width:120px; max-height:34px; }
  .hero-in, .about-hero, .capability-hero, .quality-hero, .contact-grid, .quote-grid { grid-template-columns:1fr !important; }
  .product-grid, .why-grid, .quality-grid, .services-grid, .admin-cards, .media-grid, .media-grid-inner, .blog-grid, .form-grid, .blog-form { grid-template-columns:1fr !important; }
  .admin-page { width:calc(100% - 24px) !important; }
  .media-card img { height:180px; }
  .panel-head { align-items:flex-start; flex-direction:column; }
  .media-actions { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .table-wrap, .orders-container, .data-table-wrap { overflow-x:auto; max-width:100%; }
  table { min-width:620px; }
  input, select, textarea, button { max-width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .hamburger span { transition:none; }
}

/* =========================================================
   FINAL RESPONSIVE REBUILD — MOBILE / TABLET
   These rules intentionally come last so older duplicate
   responsive rules cannot distort the layout.
   ========================================================= */

@media (max-width: 1024px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .container { width: min(100% - 32px, 960px); }

  .hero-slide-content.container {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 700px) {
  .header {
    position: sticky;
    top: 0;
  }

  .nav-container {
    width: 100% !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    position: relative;
  }

  .logo {
    font-size: 18px !important;
    line-height: 1.05;
    letter-spacing: 1.1px;
    max-width: 145px !important;
  }

  .logo span { display: block; }

  .nav-container > .hamburger {
    margin-left: auto !important;
    width: 40px;
    height: 38px;
    background: #fff;
    color: #111;
  }

  .nav-container .nav {
    position: absolute !important;
    top: calc(100% + 6px);
    left: 10px;
    right: 10px;
    width: auto !important;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff !important;
    box-shadow: 0 16px 35px rgba(0,0,0,.14);
    z-index: 2000;
  }

  .nav-container .nav a {
    min-height: 44px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    font-size: 13px !important;
    color: #222 !important;
    border-radius: 6px;
  }

  .nav-container .nav a:hover,
  .nav-container .nav a.active {
    background: #f1f7f3;
    color: #159957 !important;
  }

  /* Home hero: one clean column, no clipped words and no nested 90% container. */
  .hero-slider {
    width: calc(100% - 20px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px auto 20px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .hero-slides {
    height: auto !important;
    min-height: 620px;
  }

  .hero-slide {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 620px;
  }

  .hero-slide-content.container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 620px !important;
    height: auto !important;
    gap: 0 !important;
    padding: 30px 20px 58px !important;
  }

  .hero-slide-text {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .hero-slide-text .eyebrow {
    font-size: 9px !important;
    line-height: 1.5 !important;
    letter-spacing: 1.8px !important;
    margin-bottom: 16px !important;
    overflow-wrap: anywhere;
  }

  .hero-slide-text h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(30px, 10.5vw, 44px) !important;
    line-height: .96 !important;
    letter-spacing: -2px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-slide-text h1 span {
    display: block !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .hero-slide-text > p:not(.eyebrow) {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .hero-slide-text .hero-buttons {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }

  .hero-slide-text .hero-buttons .btn {
    min-height: 44px;
    padding: 12px 16px !important;
    font-size: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hero-slide-image {
    width: 100% !important;
    height: 245px !important;
    min-height: 245px !important;
    margin-top: 12px !important;
    overflow: visible !important;
  }

  .hero-slide-image::before {
    width: min(270px, 85vw) !important;
    height: min(270px, 85vw) !important;
  }

  .hero-slide-image img {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    max-height: 235px !important;
    object-fit: contain !important;
  }

  .hero-slider-bottom {
    bottom: 14px !important;
  }

  /* Keep all normal page sections inside the viewport. */
  section, main, footer, .container {
    max-width: 100%;
  }

  img, svg, video { height: auto; }

  .hero-buttons .btn { max-width: 100%; }

  .contact-grid,
  .quote-grid,
  .about-hero,
  .capability-hero,
  .quality-hero,
  .hero-in {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 380px) {
  .nav-container { padding-inline: 12px !important; }
  .hero-slider { width: calc(100% - 14px) !important; }
  .hero-slide-content.container { padding: 27px 16px 54px !important; }
  .hero-slide-text h1 {
    font-size: clamp(29px, 10vw, 37px) !important;
    letter-spacing: -1.5px !important;
  }
  .hero-slide-text .eyebrow { font-size: 8px !important; letter-spacing: 1.4px !important; }
  .hero-slide-image { height: 225px !important; min-height: 225px !important; }
  .hero-slide-image img { max-width: 260px !important; max-height: 215px !important; }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .hero-slider {
    width: calc(100% - 28px) !important;
    height: 620px !important;
    margin: 16px auto 24px !important;
  }

  .hero-slide-content.container {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 35px 34px 58px !important;
  }

  .hero-slide-text h1 {
    font-size: clamp(42px, 6vw, 62px) !important;
    letter-spacing: -3px !important;
  }

  .hero-slide-image img {
    width: 100% !important;
    max-width: 500px !important;
  }
}

/* =========================================================
   SILENT KILLER — TRUE 250px MOBILE BASELINE
   Designed for very narrow phones: 250px CSS viewport width.
   This block intentionally overrides older responsive rules.
   ========================================================= */
@media (max-width: 270px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    font-size: 14px;
  }

  * { max-width: 100%; }

  .container,
  .admin-page,
  .account-page,
  .nav-container {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Header */
  .header { min-height: 58px !important; }
  .nav-container {
    min-height: 58px !important;
    height: 58px !important;
    padding: 7px 8px !important;
  }
  .logo {
    width: auto !important;
    max-width: 118px !important;
    font-size: 16px !important;
    line-height: .95 !important;
    letter-spacing: 1px !important;
  }
  .logo span { display: block !important; }
  .nav-container > .hamburger {
    width: 34px !important;
    height: 32px !important;
    padding: 6px !important;
    margin-left: auto !important;
  }
  .nav-container .nav {
    left: 4px !important;
    right: 4px !important;
    top: calc(100% + 4px) !important;
    width: auto !important;
    padding: 5px !important;
    border-radius: 7px !important;
  }
  .nav-container .nav a {
    min-height: 38px !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
  }

  /* Home hero — width is based on the real viewport, never a desktop container. */
  .hero-slider {
    width: calc(100% - 12px) !important;
    max-width: 258px !important;
    height: 520px !important;
    min-height: 520px !important;
    margin: 7px auto 14px !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.09) !important;
  }
  .hero-slides,
  .hero-slide,
  .hero-slide-content.container {
    width: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
  }
  .hero-slide-content.container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 22px 13px 45px !important;
  }
  .hero-slide-text {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .hero-slide-text .eyebrow {
    font-size: 7px !important;
    line-height: 1.35 !important;
    letter-spacing: 1.15px !important;
    margin: 0 0 11px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .hero-slide-text h1,
  .hero-slide-text h1 span {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 31px !important;
    line-height: .93 !important;
    letter-spacing: -1.8px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .hero-slide-text h1 span { display: block !important; }
  .hero-slide-text > p:not(.eyebrow) {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 13px !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
  }
  .hero-slide-text .hero-buttons {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-top: 16px !important;
  }
  .hero-slide-text .hero-buttons .btn,
  .btn,
  .hero-buttons .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 9px 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  .hero-slide-image {
    width: 100% !important;
    height: 185px !important;
    min-height: 185px !important;
    margin-top: 7px !important;
    overflow: hidden !important;
  }
  .hero-slide-image::before {
    width: 170px !important;
    height: 170px !important;
  }
  .hero-slide-image img {
    width: 100% !important;
    max-width: 210px !important;
    height: 175px !important;
    max-height: 175px !important;
    object-fit: contain !important;
  }
  .hero-slider-bottom { bottom: 9px !important; }
  .hero-dots { padding: 5px 8px !important; gap: 5px !important; }
  .hero-dot { width: 5px !important; height: 5px !important; }
  .hero-dot.active { width: 15px !important; height: 5px !important; }

  /* Every public-page layout becomes a single narrow column. */
  .hero-content,
  .hero-in,
  .about-hero,
  .about-grid,
  .about-intro-grid,
  .cap-hero-inner,
  .cap-hero,
  .capabilities-grid,
  .capabilities-heading,
  .quality-hero,
  .quality-grid,
  .contact-grid,
  .quote-grid,
  .form-grid,
  .blog-grid,
  .blog-form,
  .product-grid,
  .why-grid,
  .services-grid,
  .advanced-grid,
  .compact-grid,
  .final-grid,
  .component-categories,
  .assembly-grid,
  .assembly-options,
  .belief-grid,
  .intro-grid,
  .account-grid,
  .admin-cards,
  .media-grid,
  .media-grid-inner,
  .customer-info,
  .order-top,
  .order-details,
  .order-edit,
  .admin-overview,
  .faq-heading,
  .footer-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Keep normal content compact and readable. */
  main section,
  .section,
  .about-intro,
  .intro,
  .cap-intro,
  .capabilities-intro,
  .faq-section,
  .future-section,
  .assembly-section,
  .ipc-quality,
  .beliefs,
  .cta {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  h1 { font-size: 31px !important; line-height: 1 !important; letter-spacing: -1.5px !important; }
  h2 { font-size: 24px !important; line-height: 1.05 !important; letter-spacing: -1px !important; }
  h3 { font-size: 17px !important; line-height: 1.15 !important; }
  p, li { font-size: 11px !important; line-height: 1.55 !important; }
  .eyebrow, .section-label, .about-eyebrow { font-size: 7px !important; letter-spacing: 1.1px !important; }

  /* Cards / forms */
  .product-card, .why-card, .quality-card, .service-card,
  .capability-card, .belief-card, .account-card, .admin-card,
  .ipc-standard-card, .panel, .admin-panel, .form-section,
  .order-card, .customer-preview, .board, .about-board {
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: 8px !important;
  }
  input, select, textarea, button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 11px !important;
  }
  textarea { min-height: 90px !important; }
  .form-actions, .buttons, .cta-buttons, .hero-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  /* Images must fit the narrow card instead of forcing horizontal scroll. */
  .hero img, .about-hero img, .cap-hero img, .quality-hero img,
  .product-card img, .media-card img, .ipc-standard-image img,
  .board img, .about-board img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Admin pages */
  .admin-header {
    padding: 8px !important;
    gap: 7px !important;
  }
  .admin-header .header-right,
  .admin-header .admin-header-right {
    width: 100% !important;
    margin-left: 0 !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .admin-page { padding-top: 18px !important; padding-bottom: 24px !important; }
  .control-bar { gap: 6px !important; }
  .table-wrap, .orders-container, .data-table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }
  table { min-width: 520px !important; font-size: 10px !important; }

  /* Footer */
  .footer { padding: 25px 8px 14px !important; }
  .footer-column { width: 100% !important; min-width: 0 !important; }
  .footer-bottom { font-size: 9px !important; }
}

/* 271–399px: same design language, slightly more breathing room. */
@media (min-width: 271px) and (max-width: 399px) {
  html, body { width:100% !important; max-width:100% !important; overflow-x:hidden !important; }
  .container, .admin-page, .account-page, .nav-container { width:calc(100% - 20px) !important; max-width:none !important; }
  .nav-container { min-height:60px !important; padding:8px 10px !important; }
  .logo { font-size:17px !important; max-width:135px !important; }
  .hero-slider { width:calc(100% - 14px) !important; height:540px !important; min-height:540px !important; margin:9px auto 16px !important; }
  .hero-slides, .hero-slide, .hero-slide-content.container { min-height:540px !important; height:540px !important; }
  .hero-slide-content.container { padding:24px 15px 48px !important; }
  .hero-slide-text h1, .hero-slide-text h1 span { font-size:35px !important; letter-spacing:-2px !important; }
  .hero-slide-text .eyebrow { font-size:8px !important; letter-spacing:1.35px !important; }
  .hero-slide-text > p:not(.eyebrow) { font-size:11.5px !important; }
  .hero-slide-image { height:200px !important; min-height:200px !important; }
  .hero-slide-image img { max-width:240px !important; max-height:190px !important; height:190px !important; }
  .hero-slide-image::before { width:190px !important; height:190px !important; }
  .hero-slide-text .hero-buttons .btn { font-size:11px !important; min-height:40px !important; }
}

/* Final 250px pass: cover page-specific grids/hero wrappers used across the site. */
@media (max-width: 270px) {
  .site-header { min-height:58px !important; }
  .site-header .nav-container { min-height:58px !important; height:58px !important; }
  .site-header .nav { display:none !important; }
  .site-header .nav.active { display:flex !important; }

  /* Any class whose name contains "grid" is forced to one column. */
  main [class*="grid"],
  footer [class*="grid"],
  .admin-page [class*="grid"],
  .account-page [class*="grid"] {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .about-hero,
  .cap-hero,
  .quality-hero,
  .quote-premium-hero,
  .quote-hero,
  .account-hero,
  .hero {
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:26px 0 !important;
  }
  .about-hero-content,
  .cap-hero-inner,
  .quality-hero-inner,
  .quote-hero-content,
  .quote-premium-grid,
  .account-hero,
  .hero-content,
  .hero-in {
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:0 8px !important;
  }
  .quality-hero-content,
  .quality-hero-visual,
  .quote-hero-side,
  .about-hero-meta,
  .cap-visual,
  .hero-copy,
  .hero-description {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .about-board-wrap,
  .cap-visual,
  .quality-hero-visual,
  .hero-frame,
  .quote-hero-side {
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .quote-section,
  .quote-premium-section,
  .quote-section .section-head,
  .section-head,
  .form-section,
  .account-card,
  .admin-card {
    width:100% !important;
    min-width:0 !important;
  }
  .section-head { gap:8px !important; }

  .assembly-toggle,
  .assembly-options,
  .dimension-controls,
  .colour-area,
  .colour-group,
  .buttons,
  .cta-buttons,
  .hero-actions,
  .form-actions {
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
  }

  .board-grid,
  .hero-grid-lines,
  .copper-grid {
    max-width:100% !important;
    overflow:hidden !important;
  }

  .footer-grid { gap:16px !important; }
  .footer-column { min-width:0 !important; }

  /* Prevent long labels, URLs and headings from becoming a horizontal scroll. */
  h1,h2,h3,h4,h5,h6,p,a,span,label,li,button {
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }
}

/* =========================================================
   SILENT KILLER — FINAL MOBILE NAV + TRUE PHONE LAYOUT
   Menu is BEFORE the logo and contains EVERY public page.
   The phone keeps the desktop design language; it does not
   horizontally crop or squeeze the desktop canvas.
   ========================================================= */

@media (max-width: 900px) {
  .header { overflow: visible !important; }
  .nav-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 62px !important;
    height: auto !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  /* Button is first, then logo, then the hidden dropdown. */
  .nav-container > .hamburger {
    order: 1 !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #19a45b !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #111 !important;
    box-sizing: border-box !important;
  }
  .nav-container > .logo {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }
  .nav-container > .logo span { display: inline !important; }

  /* Dropdown: all public page names. */
  .nav-container > .nav {
    order: 3 !important;
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    max-height: calc(100vh - 78px) !important;
    overflow-y: auto !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 7px !important;
    background: #fff !important;
    border: 1px solid #dfe5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.16) !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
  }
  .nav-container > .nav.active { display: flex !important; }
  .nav-container > .nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 39px !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    color: #151515 !important;
    background: #fff !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
  .nav-container > .nav a:hover,
  .nav-container > .nav a.active {
    color: #149b55 !important;
    background: #f1f8f4 !important;
  }
  .nav-container > .nav a.nav-button {
    color: #fff !important;
    background: #111 !important;
    margin-top: 3px !important;
  }

  /* Never let a page create a horizontal canvas on a phone. */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  *, *::before, *::after { box-sizing: border-box; }
  main, section, footer, header, .container { max-width: 100% !important; }

  /* Preserve the desktop visual hierarchy, but stack columns naturally. */
  .hero-slide-content,
  .about-grid,
  .quote-hero-content,
  .quote-premium-grid,
  .quality-hero-inner,
  .cap-hero-inner,
  .capabilities-hero-inner,
  .contact-grid,
  .form-grid,
  .product-grid,
  .quality-grid,
  .services-grid,
  .why-grid,
  .blog-grid {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  .hero-slide-text, .hero-slide-image,
  .about-hero-content, .about-board-wrap,
  .quote-hero-side, .quote-premium-info,
  .quality-hero-content, .quality-hero-visual,
  .cap-visual, .capability-card, .product-card,
  .contact-card, .form-section {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  img, svg, video, iframe { max-width: 100% !important; }
  h1, h2, h3, h4, h5, h6, p, a, span, label, li, button {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* 250px reference viewport: keep everything readable and inside 250px. */
@media (max-width: 270px) {
  .nav-container { min-height: 58px !important; padding: 7px 7px !important; gap: 7px !important; }
  .nav-container > .hamburger { flex-basis: 31px !important; width:31px !important; height:31px !important; }
  .nav-container > .logo { font-size: 15px !important; letter-spacing: .8px !important; }
  .nav-container > .nav { left: 3px !important; right: 3px !important; }
  .nav-container > .nav a { min-height: 36px !important; font-size: 11px !important; padding: 8px 9px !important; }

  .hero-slider {
    width: calc(100% - 10px) !important;
    margin: 6px auto 12px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .hero-slides { min-height: 0 !important; height: auto !important; }
  .hero-slide { min-height: 0 !important; height: auto !important; }
  .hero-slide-content.container {
    min-height: 0 !important;
    height: auto !important;
    padding: 19px 11px 38px !important;
  }
  .hero-slide-text .eyebrow { font-size: 6.5px !important; letter-spacing: .95px !important; margin-bottom: 9px !important; }
  .hero-slide-text h1,
  .hero-slide-text h1 span {
    font-size: 27px !important;
    line-height: .94 !important;
    letter-spacing: -1.4px !important;
  }
  .hero-slide-text > p:not(.eyebrow) { font-size: 9.5px !important; line-height: 1.5 !important; margin-top: 11px !important; }
  .hero-slide-text .hero-buttons { margin-top: 13px !important; gap: 6px !important; }
  .hero-slide-text .hero-buttons .btn { min-height: 35px !important; padding: 8px !important; font-size: 9.5px !important; }
  .hero-slide-image { height: 155px !important; min-height: 155px !important; margin-top: 6px !important; }
  .hero-slide-image img { width: 100% !important; max-width: 190px !important; height: 145px !important; max-height: 145px !important; object-fit: contain !important; }
  .hero-slide-image::before { width: 145px !important; height: 145px !important; }

  /* Other pages: same order as desktop, one column, no clipping. */
  main section { padding-left: 7px !important; padding-right: 7px !important; }
  .container { width: calc(100% - 14px) !important; margin-inline:auto !important; }
  h1 { font-size: 27px !important; line-height: .96 !important; }
  h2 { font-size: 21px !important; line-height: 1.02 !important; }
  h3 { font-size: 15px !important; }
  p, li, label { font-size: 10px !important; line-height: 1.5 !important; }
  .eyebrow, .section-label, .about-eyebrow { font-size: 6.5px !important; letter-spacing: 1px !important; }
  input, select, textarea { font-size: 10px !important; padding: 8px !important; }
  button, .btn, .premium-btn { font-size: 9.5px !important; min-height: 34px !important; }
}

/* =========================================================
   SILENT KILLER — UNIVERSAL NAV FINAL OVERRIDES
   Hamburger first, logo second, full menu on press.
========================================================= */
.sk-admin-nav-link{font-weight:800!important;color:#20a85c!important}
@media (max-width:900px){
  .nav-wrap,.nav-container{display:flex!important;align-items:center!important;}
  .nav-wrap>.hamburger,.nav-container>.hamburger{order:0!important;}
  .nav-wrap>.logo,.nav-container>.logo{order:1!important;}
  .nav-wrap>nav,.nav-container>.nav{order:2!important;}
}