/* OPCT v1.5.8 adaptive layout layer.
   Loaded after the established OPCT stylesheet so the artwork stays intact while
   spacing, grids and navigation adapt to the actual viewport. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
.opct-wrap { width: min(calc(100% - clamp(1.25rem, 4vw, 4rem)), var(--opct-wrap)); }
.opct-section { padding: clamp(2.75rem, 5.5vw, 5.75rem) 0; }
.opct-section-head { margin-bottom: clamp(1.35rem, 3vw, 2.2rem); }
.opct-card { min-width: 0; }
.opct-card h2, .opct-card h3, .opct-card p, .opct-content { overflow-wrap: anywhere; }
.opct-hero-actions, .opct-quick-actions { flex-wrap: wrap; }

/* v1.5.12 correction: the supplied hero artwork remains fully visible.
   Do not force a viewport height or crop it with a cover fit. */
.opct-home-image-hero { width: 100%; }
.opct-home-hero-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: center top;
}

/* Prevent four-column laptop compression. */
@media (max-width: 1500px) {
  .opct-home-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opct-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opct-service-block-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Typical laptop widths: give content breathing room and collapse navigation before it crowds. */
@media (max-width: 1180px) {
  .opct-header-inner { min-height: 68px; }
  .opct-menu-toggle { display: inline-flex !important; margin-inline: auto; }
  .main-navigation {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    max-height: calc(100dvh - 100px);
    overflow-y: auto !important;
    padding: .8rem 1rem 1rem !important;
    border-bottom: 1px solid var(--opct-border);
    background: #090c10;
  }
  .main-navigation.is-open { display: block !important; }
  .main-navigation ul { display: block !important; }
  .main-navigation li { position: relative; }
  .main-navigation a { padding: .72rem .6rem; font-size: .9rem; }
  .main-navigation .menu-item-has-children > a { padding-right: 3rem; }
  .main-navigation .menu-item-has-children > a::after { display: none !important; }
  .opct-submenu-toggle {
    position: absolute; top: .18rem; right: .15rem; z-index: 4;
    display: grid !important; place-items: center; width: 42px; min-height: 42px;
    padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
    background: rgba(255,255,255,.035); box-shadow: none;
  }
  .main-navigation .sub-menu,
  .main-navigation .sub-menu .sub-menu {
    position: static !important;
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: none !important;
    margin: 0 0 .35rem .6rem !important;
    padding: 0 0 0 .6rem !important;
    border: 0 !important;
    border-left: 1px solid rgba(227,27,35,.35) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .main-navigation .menu-item-has-children.submenu-open > .sub-menu { display: block !important; }

  .opct-home-visual-grid,
  .opct-home-product-grid,
  .opct-grid-3,
  .opct-grid-4,
  .opct-product-grid,
  .opct-plan-grid,
  .opct-category-grid,
  .opct-service-block-grid,
  .opct-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .opct-home-hero-image { height: auto !important; min-height: 0 !important; max-height: none !important; }
}

/* Short laptop screens such as 1366x768 / 1440x900: reduce vertical crowding. */
@media (min-width: 769px) and (max-height: 900px) {
  .opct-announcement { padding-block: .38rem; font-size: .78rem; }
  .opct-header-inner { min-height: 64px; }
  .opct-section { padding: clamp(2.2rem, 4.2vw, 4rem) 0; }
  .opct-home-hero-image { height: auto !important; min-height: 0 !important; max-height: none !important; }
  .opct-home-visual-body { padding: 1rem; }
  .opct-card { padding: clamp(1.1rem, 2vw, 1.55rem); }
  .opct-chat-log { min-height: 150px; max-height: 230px; }
}

@media (max-width: 768px) {
  .opct-wrap { width: min(calc(100% - 1.25rem), var(--opct-wrap)); }
  .opct-section { padding: 2.5rem 0; }
  h1 { font-size: clamp(2rem, 10vw, 3.4rem); }
  h2 { font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .opct-home-hero-image { height: auto !important; min-height: 0 !important; max-height: none !important; }
  .opct-grid-2,
  .opct-grid-3,
  .opct-grid-4,
  .opct-home-visual-grid,
  .opct-home-product-grid,
  .opct-product-grid,
  .opct-plan-grid,
  .opct-category-grid,
  .opct-service-block-grid,
  .opct-feature-list { grid-template-columns: 1fr !important; }
  .opct-hero-actions { display: grid; grid-template-columns: 1fr; }
  .opct-hero-actions .button { width: 100%; }
  .opct-contact-map iframe { height: min(55vh, 360px); }
  .opct-chat-log { min-height: 135px; max-height: 230px; }
  .opct-chat-form { grid-template-columns: 1fr auto; }
}

@media (max-width: 420px) {
  .opct-wrap { width: min(calc(100% - 1rem), var(--opct-wrap)); }
  .opct-announcement { font-size: .68rem; letter-spacing: .055em; }
  .opct-home-hero-image { height: auto !important; min-height: 0 !important; max-height: none !important; }

@media (min-width: 1680px) {
  :root { --opct-wrap: 1400px; }
  .opct-home-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opct-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* General embedded-content safety for all device widths. */
iframe, video, canvas, svg { max-width: 100%; }
.opct-content table { width: 100%; max-width: 100%; }
@media (max-width: 768px) {
  .opct-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}