/* Responsive layer for the static Aragocor build.
   The design ships fixed-width inline styles at 1440px; these rules use
   !important to override inline declarations at narrow viewports.
   Helper classes tagged in markup: r-shell, r-grid-2, r-grid-3, r-data,
   r-h1, r-h2, r-hero, r-tablewrap. The hamburger nav (below 900px) is built
   at runtime by a small inline script in each page and styled here. */

html { -webkit-text-size-adjust: 100%; }

/* Skip link: visually hidden until focused, then pinned to the top-left so
   keyboard users can jump past the nav straight to <main id="main">. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink, #0E3540); color: var(--bone, #F7F4ED);
  padding: 10px 16px; border-radius: 0 0 4px 0;
  font-family: var(--font-sans), sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; outline: 2px solid var(--bone, #F7F4ED); outline-offset: -4px; }
/* Overflow guard: nothing may spill past the screen edge at any width. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* Tables and grid-tables scroll horizontally inside their wrapper.
   min-width:0 lets the wrapper shrink below its content when it is a grid/flex
   item, so the table scrolls instead of widening the whole page. */
.r-tablewrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; min-width: 0;
  /* Right-edge fade tells the user the table keeps going sideways. */
  background-image: linear-gradient(to right, rgba(255,255,255,0) calc(100% - 44px), rgba(14,53,64,0.10) 100%);
  background-attachment: local, scroll; }
.r-tablewrap > table { min-width: 520px; }
.r-tablewrap > .r-data { min-width: 560px; }

/* =========================================================================
   HAMBURGER NAV  (built by inline script; shown below 900px)
   ========================================================================= */
.nav-toggle { display: none; }
.nav-mobile { display: none; }

/* Tighten the desktop nav in the 901–1080px band so 6 links + CTA still fit. */
@media (min-width: 901px) and (max-width: 1080px) {
  .dc-sitenav .r-shell > div:first-child { gap: 22px !important; }
  .dc-sitenav .r-shell > div:first-child > div { gap: 16px !important; }
  .dc-sitenav .navlink { font-size: 13.5px !important; }
}

@media (max-width: 900px) {
  /* Compact single-row bar: logo left, hamburger right. */
  .dc-sitenav .r-shell {
    height: 64px !important;
    padding: 0 20px !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  /* Hide the horizontal link cluster and the desktop CTA button. */
  .dc-sitenav .r-shell > div:first-child > div { display: none !important; }
  .dc-sitenav .r-shell > a { display: none !important; }

  /* The ☰ / ✕ toggle. */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 0;
    color: #F7F4ED;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }

  /* Full-width dropdown panel, anchored under the (sticky) bar. */
  .nav-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    padding: 8px 0 16px;
    background: #0d141c;
    border-top: 1px solid rgba(247, 244, 237, 0.14);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.35);
  }
  .nav-mobile.open { display: flex !important; }
  .nav-mobile a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 24px;
    border-bottom: none;
    color: rgba(247, 244, 237, 0.9) !important;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
  }
  .nav-mobile a:hover,
  .nav-mobile a:active { background: rgba(247, 244, 237, 0.06); }
  .nav-mobile a.is-active {
    color: var(--bone) !important;
    box-shadow: inset 3px 0 0 var(--sand);
  }
  .nav-mobile .nav-mobile-cta {
    justify-content: center;
    margin: 14px 20px 0;
    min-height: 52px;
    border-radius: 4px;
    background: var(--bone);
    color: var(--ink) !important;
    font-weight: 600;
  }
}

/* =========================================================================
   LAYOUT / GRIDS
   ========================================================================= */
/* ---- tablet ---- */
@media (max-width: 1100px) {
  .r-shell { padding-left: 28px !important; padding-right: 28px !important; }
  .r-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-h1 { font-size: 46px !important; }
  .r-h2 { font-size: 34px !important; }
}

/* ---- phone / small tablet ---- */
@media (max-width: 820px) {
  .r-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Nav shell keeps its own compact padding (more specific rule above wins). */

  /* Every content grid collapses to one column. */
  .r-grid-2,
  .r-grid-3 { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Let grid children shrink so wide content (tables) scrolls instead of
     forcing the track — and the page — wider than the viewport. */
  .r-grid-2 > *,
  .r-grid-3 > * { min-width: 0 !important; }
  /* Data-sheet sections: tighten the letter-width padding on phones, allow the
     header/footer rows to wrap, and stop nowrap runs (address line) overflowing. */
  .tds-sheet .page > div { padding-left: 20px !important; padding-right: 20px !important; flex-wrap: wrap !important; }
  .tds-sheet [style*="nowrap"] { white-space: normal !important; }

  /* Footer columns and the tds spec grid stack; data grid-tables scroll instead. */
  .dc-sitefooter .r-data { grid-template-columns: 1fr !important; gap: 28px !important; }
  .tds-sheet .r-data { grid-template-columns: 1fr !important; gap: 8px !important; }

  .r-data { font-size: 13px !important; }

  .r-hero { height: auto !important; min-height: 440px !important; }
  .r-hero > div:last-child { padding-top: 64px !important; padding-bottom: 64px !important; }

  .r-h1 { font-size: 36px !important; line-height: 1.1 !important; }
  .r-h2 { font-size: 28px !important; line-height: 1.15 !important; }

  /* ---- contact form ---- */
  .fld { font-size: 16px !important; }                 /* 16px avoids iOS focus zoom */
  form[action] { padding: 26px !important; }
  form[action] button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
    height: 52px !important;
  }

  /* Wide data tables scroll inside their wrapper instead of being clipped. */
  .table-wrap, .r-tablewrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; word-break: break-word; }

  /* ---- tap targets ---- */
  .dc-sitefooter .foot-link,
  .dc-sitenav .navlink,
  .nav-mobile a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-toggle { min-width: 44px !important; min-height: 44px !important; }
}

/* ---- very small phones ---- */
@media (max-width: 400px) {
  .r-shell { padding-left: 18px !important; padding-right: 18px !important; }
  .r-h1 { font-size: 30px !important; }
  .r-h2 { font-size: 23px !important; }
}

/* =========================================================================
   TECHNICAL DATA SHEET: screen vs print
   ========================================================================= */
.tds-bar {
  background: #0d141c;
  padding: 14px 24px;
  font: 500 14px/1 "Geist", -apple-system, system-ui, sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.tds-bar a { color: #F7F4ED; text-decoration: none; }
.tds-bar a:hover { color: #D7C59C; }
.tds-sheet {
  max-width: 8.5in;
  margin: 32px auto;
  background: #fff;
  box-shadow: 0 12px 40px rgba(14, 42, 51, 0.12);
}
@media (max-width: 820px) {
  /* The letter-width sheet must shrink to the viewport instead of being clipped
     by the page overflow guard; the inner grids/tables already reflow/scroll. */
  .tds-sheet { max-width: 100%; margin: 16px; }
}
@media print {
  .tds-bar { display: none; }
  .tds-sheet { margin: 0; box-shadow: none; max-width: none; }
  @page { size: letter; margin: 0; }
}