/* Small-screen refinements. Loaded only on screens up to 900px wide. */
@media screen and (max-width: 900px) {
  a[href^="mailto:"] { overflow-wrap: anywhere; white-space: normal; min-width: 0; }
  button, input[type="button"], input[type="submit"], input[type="reset"] { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
  select, textarea { box-sizing: border-box; max-width: 100%; min-width: 0; font-size: max(1em, 16px); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]), select { min-height: 44px; }

  body.clearframe-home { height: auto; min-height: 100svh; background-color: #04090c; }
  .clearframe-home .concept-hero-grid > *,
  .clearframe-home .concept-process-close > *,
  .clearframe-home .concept-footer-grid > * { min-width: 0; }
  .clearframe-home .concept-process-close { box-sizing: border-box; max-width: 100%; }
  .clearframe-home .process-contact-primary { box-sizing: border-box; min-width: 0; max-width: 100%; }
  .clearframe-home .concept-direct-contact { flex-wrap: wrap; }
  .clearframe-home .concept-footer-business a,
  .clearframe-home .concept-footer-column > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .clearframe-home .concept-footer-column { gap: 2px; }
  .clearframe-home .concept-footer-inline-list { gap: 8px; }
  .clearframe-home .concept-footer-inline-list a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Use the existing menu behavior throughout the tablet portrait range. */
  .cfw-home-header-inner, body.clearframe-home .header-inner { width: calc(100% - 36px); gap: 12px; position: relative; }
  .cfw-home-brand img, body.clearframe-home .brand-lockup { width: 190px; max-width: 58vw; }
  .cfw-home-nav-toggle, body.clearframe-home .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; flex: 0 0 auto; }
  .cfw-home-nav, body.clearframe-home #concept-nav {
    position: absolute; inset: calc(100% + 6px) 0 auto auto; z-index: 110;
    display: none; width: min(320px, calc(100vw - 36px)); min-width: 0;
    max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box; flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 8px; border: 1px solid rgba(155,124,255,.15); border-radius: 14px;
    background: #081419; box-shadow: 0 18px 44px rgba(0,0,0,.26);
  }
  .cfw-home-nav.open, body.clearframe-home #concept-nav.open { display: flex; }
  .cfw-home-nav a, body.clearframe-home #concept-nav a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 10px 14px; border-radius: 9px; white-space: normal; font-size: 15px; }
  .cfw-home-nav a:focus-visible, body.clearframe-home #concept-nav a:focus-visible { outline: 2px solid #6ab8ff; outline-offset: -2px; }
  .clearframe-home .difference-hero-controls { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .clearframe-home .difference-hero-controls button { width: 44px; height: 44px; }
}

@media screen and (max-width: 760px) {
  .clearframe-home .concept-hero { padding-top: 32px; padding-bottom: 36px; }
  .clearframe-home .concept-hero .wrap { width: calc(100% - 36px); }
  .clearframe-home .concept-hero h1 { font-size: clamp(38px, 10.8vw, 54px); line-height: 1.04; margin-bottom: 20px; overflow-wrap: normal; }
  .clearframe-home .concept-hero .hero-sub { font-size: 18px; line-height: 1.5; }
  .clearframe-home .concept-hero .hero-pitch { font-size: 16px; line-height: 1.6; }
  .clearframe-home .concept-hero-eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: .12em; }
  .clearframe-home .concept-hero-grid:has(> .cf-hero-proof) { grid-template-columns: minmax(0,1fr); grid-template-areas: "copy" "proof" "mark" "owner"; gap: 28px; }
  .clearframe-home .concept-hero-grid > .cf-ribbon { width: calc(100% - 36px); max-width: 240px; }
  .clearframe-home .cf-hero-contact > .concept-hero-owner { box-sizing: border-box; width: 100%; grid-template-columns: 72px minmax(0,1fr); gap: 16px; padding: 16px; }
  .clearframe-home .cf-hero-contact > .concept-hero-owner > img { width: 72px; height: 72px; }
  .clearframe-home .cf-hero-contact .hero-design-note { font-size: 15px; letter-spacing: .07em; }
  .clearframe-home .cf-hero-proof .hero-demo-window { aspect-ratio: auto; height: 440px; grid-template-rows: auto minmax(0,1fr); }
  .clearframe-home .hero-demo-toolbar { min-height: 44px; padding: 0 10px; gap: 8px; }
  .clearframe-home .hero-demo-toolbar a { min-height: 44px; }
  .clearframe-home .cmd-ops-demo-frame { width: 100%; height: 100%; transform: none; }
  .clearframe-home .concept-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
  .clearframe-home .concept-footer-business { grid-column: 1 / -1; }
  .clearframe-home .concept-footer { padding: 36px 0; }
}

@media screen and (max-width: 480px) {
  .clearframe-home .section-title { overflow-wrap: anywhere; }
  .clearframe-home .cf-hero-contact > .concept-hero-owner strong { font-size: 22px; }
  .clearframe-home .cf-hero-contact > .concept-hero-owner span span { font-size: 13px; }
  .clearframe-home .concept-footer-grid { gap: 24px 16px; }
  .clearframe-home #process .gsc-close .section-title { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.08; }
  .clearframe-home #process .gsc-close .section-copy { font-size: 16px; line-height: 1.6; }
  .contact-page .contact-actions { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .contact-page .contact-action { min-height: 48px; justify-content: center; text-align: center; }
  .contact-page .contact-details { flex-wrap: wrap; }
}