/* ==========================================================================
   EleventhBit site styles
   Shared across index.html, the six service pages and products.html.
   Converted from the Claude Design canvas export (was inline <style> +
   the support.js runtime). Page markup still carries most of its layout
   as inline styles; this file holds the base, the animation system, the
   responsive collapses and the interactive component chrome.
   ========================================================================== */

html, body { margin: 0; padding: 0; background: #F1F1ED; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: #0B5FB0; text-decoration: none; }
a:hover { color: #16A0E0; }
/* Footer + mobile-drawer links carry an inline color that would otherwise
   block the generic a:hover, so give them their own hover feedback. */
footer a[style]:hover,
.eb-drawer a[style]:hover { color: #0B1A2A !important; }
footer a[style], .eb-drawer a[style] { transition: color 0.14s ease; }
::selection { background: #16A0E0; color: #fff; }
[hidden] { display: none !important; }

/* ---- Motion system ------------------------------------------------------ */
@keyframes ebIn   { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes ebMenu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ebRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ebRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Elements rise into view once. They only start hidden when JS is running
   (the <html class="js"> flag is set synchronously in the page head), so
   with JS disabled everything stays visible. */
.js [data-eb-rise] { opacity: 0; }
.js [data-eb-rise].eb-live { animation: ebRise 0.8s cubic-bezier(0.22, 0.9, 0.26, 1) both; }
.js [data-eb-rise].eb-live > [data-eb-rule] {
  animation: ebRule 0.55s cubic-bezier(0.22, 0.9, 0.26, 1) both;
  animation-delay: inherit; transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-eb-rise] { opacity: 1; }
  .js [data-eb-rise].eb-live,
  .js [data-eb-rise].eb-live > [data-eb-rule] { animation: none; }
}

/* ---- Focus visibility ---------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid #0B5FB0;
  outline-offset: 2px;
  border-radius: 1px;
}
/* On the navy sections a lighter ring reads better. */
#how a:focus-visible,
#how button:focus-visible,
[style*="#0B1A2A"] > a:focus-visible {
  outline-color: #16A0E0;
}

/* ---- Header dropdowns ------------------------------------------------- */
.eb-dropdown { position: relative; display: flex; align-items: center; }
.eb-dropdown-menu {
  position: absolute; top: 100%; left: -20px; margin-top: 14px;
  background: #F1F1ED; border: 1px solid #C9C9C0;
  box-shadow: 0 18px 44px rgba(11,26,42,0.14);
  animation: ebMenu 0.16s ease both; z-index: 60;
}
.eb-dropdown-menu[hidden] { display: none !important; }
.eb-dropdown-menu a:hover { background: #E9E9E3; }
.eb-caret { font-size: 9px; line-height: 1; color: #586472; }
/* Invisible bridge across the 14px gap between the trigger and the menu,
   so the pointer never leaves .eb-dropdown on its way to the menu items. */
.eb-dropdown-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}

/* ---- Mobile drawer --------------------------------------------------- */
.eb-drawer { border-top: 1px solid #D3D3CB; background: #F1F1ED; animation: ebMenu 0.18s ease both; }
.eb-drawer[hidden] { display: none !important; }

/* ---- Service-domain switcher (homepage) ---------------------------- */
[data-eb-domain] { transition: background 0.14s ease, box-shadow 0.14s ease; }
[data-eb-domain]:hover { background: #E9E9E3 !important; }
[data-eb-domain][aria-selected="true"] {
  background: #E9E9E3 !important;
  box-shadow: inset 3px 0 0 #0B5FB0;
}
[data-eb-domain][aria-selected="true"] span:nth-of-type(2) { font-weight: 500; }

/* ---- Contact form: optional-detail disclosure -------------------- */
.eb-more { border-top: 1px solid #D3D3CB; padding-top: 12px; }
.eb-more summary { list-style: none; display: inline-flex; gap: 6px; align-items: baseline; }
.eb-more summary::-webkit-details-marker { display: none; }
.eb-more summary::before { content: "+"; font-weight: 500; }
.eb-more[open] summary::before { content: "\2013"; }

/* ---- FAQ accordion (services page) -------------------------------- */
.eb-faq { border-bottom: 1px solid #D3D3CB; }
.eb-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 30px 16px 0;
  font-size: 15.5px; font-weight: 500; color: #0B1A2A; line-height: 1.45;
}
.eb-faq summary::-webkit-details-marker { display: none; }
.eb-faq summary::after {
  content: "+"; position: absolute; right: 2px; top: 14px;
  font-family: 'IBM Plex Mono', monospace; color: #586472; font-weight: 400;
}
.eb-faq[open] summary::after { content: "\2013"; }
.eb-faq p { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: #3B4A59; max-width: 72ch; }

/* ---- Image placeholders (were <image-slot>) -----------------------
   No real photography yet. Rather than a "drop image here" box, these
   render as a quiet branded panel echoing the skewed-bar motif. The
   placeholder caption stays in the markup as data-label for whoever
   adds the real <img>. */
.eb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-color: #E4E4DD;
  background-image: repeating-linear-gradient(78deg,
    rgba(11,26,42,0.045) 0 1px, transparent 1px 24px);
  box-shadow: inset 0 0 0 1px rgba(11,26,42,0.06);
}
.eb-img--dark {
  background-color: rgba(255,255,255,0.04);
  background-image: repeating-linear-gradient(78deg,
    rgba(255,255,255,0.06) 0 1px, transparent 1px 24px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* ---- Legal / policy document pages (privacy, terms) --------------- */
/* Outer box matches the site container so content lines up under the
   page H1; inner measure is capped for readability. */
.eb-doc { max-width: 1340px; margin: 0 auto; padding: 64px 40px 100px; }
.eb-doc > * { max-width: 820px; }
.eb-doc > h2 {
  font-family: Fraunces, Georgia, serif; font-weight: 400;
  font-size: 27px; line-height: 1.25; letter-spacing: -0.01em; color: #0B1A2A;
  margin: 60px 0 0; padding-top: 24px; border-top: 1px solid #D3D3CB;
  scroll-margin-top: 96px;
}
.eb-doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.eb-doc h3 {
  font-family: Inter, sans-serif; font-weight: 600; font-size: 15.5px;
  color: #0B1A2A; margin: 30px 0 0;
}
.eb-doc p, .eb-doc li { font-size: 15.5px; line-height: 1.72; color: #3B4A59; }
.eb-doc p { margin: 14px 0 0; }
.eb-doc ul { margin: 12px 0 0; padding-left: 20px; }
.eb-doc li { margin: 6px 0 0; }
.eb-doc strong { color: #0B1A2A; font-weight: 600; }
.eb-doc a { color: #0B5FB0; }
.eb-doc a:hover { color: #16A0E0; }

.eb-doc .notice {
  margin: 16px 0 0; padding: 13px 18px;
  background: #E9E9E3; border-left: 3px solid #0B5FB0;
  font-size: 14.5px; line-height: 1.62; color: #3B4A59;
}
.eb-doc .notice strong { color: #0B1A2A; }

.eb-doc .toc-list { list-style: none; padding-left: 0; margin-top: 18px; border-top: 1px solid #D3D3CB; }
.eb-doc .toc-list li { margin: 0; border-bottom: 1px solid #E4E4DD; }
.eb-doc .toc-list a {
  display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px;
  padding: 11px 2px; color: #0B1A2A; font-size: 14px; line-height: 1.4;
}
.eb-doc .toc-list a:hover { color: #0B5FB0; }

.eb-doc .doc-scroll { overflow-x: auto; margin-top: 20px; }
.eb-doc table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.eb-doc th, .eb-doc td {
  text-align: left; vertical-align: top; padding: 10px 13px;
  border: 1px solid #D3D3CB; line-height: 1.5; color: #3B4A59;
}
.eb-doc th {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #0B1A2A;
  background: #E9E9E3; white-space: nowrap;
}

@media (max-width: 720px) {
  .eb-doc { padding-left: 20px; padding-right: 20px; }
}

/* ---- Responsive collapses (keyed to data-r attributes) ------------- */
@media (max-width: 1100px) {
  [data-r="hero"] { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
  [data-r="four"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-r="three"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-r="five"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  [data-r="domains"] { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
  [data-r="footer"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 40px !important; }
  [data-r="cta"] { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
  [data-r="two"] { grid-template-columns: minmax(0,1fr) !important; gap: 36px !important; }
  [data-r="prod"] { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  [data-r="labelled"] { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
  [data-r="pricecommit"] { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  [data-r="faq"] { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  [data-r="nav"] { display: none !important; }
  [data-r="burger"] { display: flex !important; }
  [data-r="ctabtn"] { display: none !important; }
  [data-r="pad"] { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 720px) {
  [data-r="four"], [data-r="three"], [data-r="five"], [data-r="footer"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-r="names"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-r="stat"] { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
  [data-r="pad"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r="h1"] { font-size: 36px !important; }
  [data-r="h2"] { font-size: 28px !important; }
  [data-r="ctah"] { font-size: 34px !important; }
  [data-r="sechead"] { flex-wrap: wrap !important; gap: 10px !important; }
  [data-r="stat"] { border-right: 0 !important; }
  [data-r="ctapanel"] { padding: 40px 24px !important; }
  [data-r="watermark"] { display: none !important; }
  [data-r="fields"] { grid-template-columns: minmax(0,1fr) !important; }
}
