/* ==========================================================================
   rapidm.tech — responsive layer
   The artboard's inline styles carry the desktop design verbatim (1440px).
   This file adds the container behaviour, the mobile menu and the two
   breakpoints, using !important only where it has to beat an inline style.
   Breakpoints follow the canvas: desktop 1440, mobile 390.
   ========================================================================== */

:root {
  --ink: #15171B;
  --ink-deep: #111317;
  --paper: #F1EFE9;
  --paper-2: #E7E4DC;
  --paper-ink: #EDEBE5;
  --copper: #B8732F;
  --copper-light: #DA984E;
  --copper-dark: #95561B;
  --rule: #D2CEC3;
  --rule-dark: #3A3F47;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--paper); }
a { color: var(--ink); }
a:hover { color: var(--copper-dark); }
.site-header a:hover, .site-footer a:hover, .dark a:hover { color: var(--copper-light); }
a[href="#contact"]:hover { color: var(--ink); background: #E6A962 !important; }

img, svg { max-width: 100%; }

/* The artboard was a fixed 1440px frame; let it breathe but not sprawl. */
.page {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  overflow-x: clip;
}

/* Section anchors clear the header when it is pinned on small screens. */
.band { scroll-margin-top: 80px; }

/* Decorative section artwork never steals a tap or a screen reader. */
.bg-art { pointer-events: none; }

/* --------------------------------------------------------------------------
   Skip link + focus
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--copper-light);
  color: var(--ink);
  font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
  padding: 12px 20px;
}
.skip:focus { inset-inline-start: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--copper-light);
  outline-offset: 3px;
}
.dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible {
  outline-color: var(--copper-light);
}

/* --------------------------------------------------------------------------
   Mobile menu — the button is hidden until the nav collapses
   -------------------------------------------------------------------------- */

.menu-btn {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid rgba(237, 235, 229, 0.3);
  border-radius: 2px;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.menu-btn svg { display: block; }
.menu-btn[aria-expanded="true"] { background: rgba(237, 235, 229, 0.12); }

/* --------------------------------------------------------------------------
   Tablet / small laptop
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .site-header { padding: 0 40px !important; gap: 20px !important; }
  .site-header nav { gap: 18px !important; }
  .site-header nav a { font-size: 14px !important; }

  .band { padding-inline: 40px !important; }
  .site-footer { padding-inline: 40px !important; }

  .g12 { grid-template-columns: minmax(0, 1fr) !important; row-gap: 48px; }
  .col { grid-column: auto !important; }

  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .g6 > div { padding-inline-start: 24px !important; border-inline-start: 1px solid var(--rule) !important; }
  .g6 > div:nth-child(3n+1) { padding-inline-start: 0 !important; border-inline-start: 0 !important; }

  h1.display { font-size: 60px !important; font-stretch: 110% !important; }
  h2.display { font-size: 44px !important; }

  /* the contact column reserves room for the napkin sketch on desktop only */
  #contact .col { padding-bottom: 40px !important; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .site-header {
    height: 72px !important;
    padding: 0 20px !important;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .site-header > a svg { width: 62px !important; height: 47px !important; }

  /* collapse the inline nav into a panel under the bar */
  .site-header nav {
    display: none !important;
    position: absolute;
    inset-inline: 0;
    top: 72px;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--ink);
    border-top: 1px solid rgba(237, 235, 229, 0.14);
    padding: 8px 20px 20px;
  }
  .site-header nav[data-open="true"] { display: flex !important; }
  .site-header nav a {
    font-size: 17px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(237, 235, 229, 0.1);
  }
  .menu-btn { display: inline-flex; }

  /* the header CTA is redundant next to the hero one */
  .site-header a[href="#contact"] { display: none !important; }

  .band {
    padding: 24px 20px 60px !important;
    min-height: 0 !important;
  }
  #contact { padding: 72px 20px 72px !important; }
  .site-footer { padding: 56px 20px 32px !important; }

  h1.display { font-size: 43px !important; font-stretch: 108% !important; }
  h2.display { font-size: 36px !important; }
  #technologies h2.display { font-size: 32px !important; }
  #contact h2.display { font-size: 44px !important; font-stretch: 116% !important; }
  h3.sub { font-size: 20px !important; }

  .band p { font-size: 16.5px !important; }
  h1.display + p, #contact h2.display + p { font-size: 17.5px !important; }

  /* every multi-column structure becomes one column */
  .g12, .g2, .specbar { grid-template-columns: minmax(0, 1fr) !important; }
  .col { grid-column: auto !important; }
  .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g6 > div {
    padding: 22px 16px !important;
    border-inline-start: 1px solid var(--rule) !important;
    border-top: 1px solid var(--rule);
  }
  .g6 > div:nth-child(odd) { padding-inline-start: 0 !important; border-inline-start: 0 !important; }
  .g6 > div > div:first-child { font-size: 22px !important; }

  .specbar > div { border-inline-start: 0 !important; border-top: 1px solid var(--ink); }
  .specbar > div:first-child { border-top: 0; }

  .rowgrid { grid-template-columns: 36px minmax(0, 1fr) !important; column-gap: 14px !important; }

  #contact .col { padding-bottom: 24px !important; }

  /* stack the hero figure under the copy with a little air */
  .fig { margin-top: 8px !important; }

  /* the primary CTA and the secondary link each get their own line */
  .ctarow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .ctarow > a:first-child { width: 100%; justify-content: center; }

  /* footer columns two-up rather than six-up */
  .site-footer .g12 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 36px; column-gap: 20px; }
  .site-footer .g12 > div:first-child { grid-column: 1 / -1 !important; }
  .site-footer .g12 > div > div:last-child { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
}

@media (max-width: 420px) {
  .g6 { grid-template-columns: minmax(0, 1fr) !important; }
  .g6 > div { padding-inline-start: 0 !important; border-inline-start: 0 !important; }
}

/* ---- contact form -------------------------------------------------- */
.rmt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.rmt-form .wide { grid-column: 1 / -1; }
.rmt-form label {
  display: block;
  font-family: var(--form-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: #5F646C; margin-bottom: 9px;
}
[dir="rtl"] .rmt-form label {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  letter-spacing: 0; text-transform: none; font-size: 13px;
}
.rmt-form input, .rmt-form textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 16px; color: #15171B;
  background: #F1EFE9;
  border: 0; border-bottom: 1.5px solid #15171B;
  padding: 10px 2px 12px;
  border-radius: 0; appearance: none;
  transition: border-color .15s, background .15s;
}
.rmt-form textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.rmt-form input::placeholder, .rmt-form textarea::placeholder { color: #9A958E; }
.rmt-form input:focus, .rmt-form textarea:focus {
  outline: none; border-bottom-color: #B8732F; background: #E7E4DC;
}
/* Visually hidden without pushing the page canvas — an off-screen
   negative offset extends the scroll width in RTL. */
.rmt-form .hp {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.rmt-form button {
  justify-self: start;
  font: inherit; font-size: 16px; font-weight: 600;
  height: 52px; padding: 0 28px; cursor: pointer;
  background: #DA984E; color: #15171B;
  border: 1px solid #DA984E; border-radius: 2px;
  transition: background .18s, border-color .18s;
}
.rmt-form button:hover { background: #E6A962; border-color: #E6A962; }
.rmt-form button[disabled] { opacity: .55; cursor: default; }
.form-status { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.6; margin: 0; }
.form-status[data-state="ok"] { color: #2F6B3F; }
.form-status[data-state="err"] { color: #A63244; }
@media (max-width: 700px) {
  .rmt-form { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }
  .rmt-form button { width: 100%; justify-self: stretch; }
}

/* --------------------------------------------------------------------------
   Nav dropdowns (3D printing, 3D scanning)
   Hover for mice, focus-within for keyboards, always-open inside the
   phone panel where there is no hover to rely on.
   -------------------------------------------------------------------------- */

.navitem { position: relative; display: inline-flex; align-items: center; }

.navitem > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-inline-start: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
}

.navmenu {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: -16px;
  min-width: 200px;
  background: var(--ink);
  border: 1px solid rgba(237, 235, 229, 0.14);
  padding: 6px 0;
  z-index: 60;
}
.navitem:hover .navmenu,
.navitem:focus-within .navmenu { display: block; }

.navmenu a {
  display: block;
  padding: 11px 18px;
  color: var(--paper-ink);
  text-decoration: none;
  font-size: 14.5px;
  white-space: nowrap;
  border: 0;
}
.navmenu a:hover,
.navmenu a:focus-visible { background: rgba(237, 235, 229, 0.08); color: var(--copper-light); }

@media (max-width: 700px) {
  /* inside the phone panel the submenu is simply nested, always visible */
  .navitem { display: block; }
  .navitem > a::after { display: none; }
  .navmenu {
    display: block;
    position: static;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
  }
  /* one rule under the whole group, children indented beneath their parent */
  .navitem { border-bottom: 1px solid rgba(237, 235, 229, 0.1); }
  .navitem > a { display: block; border-bottom: 0 !important; }
  .navmenu a {
    padding: 10px 0 10px 24px !important;
    font-size: 15px !important;
    opacity: 0.68;
    border-bottom: 0 !important;
  }
  .navmenu a:last-child { padding-bottom: 15px !important; }
  [dir="rtl"] .navmenu a { padding: 10px 24px 10px 0 !important; }
  [dir="rtl"] .navmenu a:last-child { padding-bottom: 15px !important; }
}