/* =====================================================================
   Bedrock Space — shared site CSS
   Loaded by every page so header / footer / typography are byte-identical.
   Page-specific styles remain inline in each HTML's <style> block.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

/* ===== Lenis smooth scroll (required styles) =====
   Lenis hooks wheel/touch events and animates document scroll via rAF.
   These rules let Lenis own the scroll layer; CSS scroll-behavior is left
   off so it never fights with Lenis's interpolation. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Reduced-motion: bail out of smooth scroll entirely.
   The init script also detects this and skips Lenis instantiation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body, button, input, h1, h2, h3, h4, h5, h6, p, li, span, div, a, ol, ul, table {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans SC", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif !important;
  font-style: normal !important;
  font-synthesis: none;
}

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Text selection =====
   Default (white pages): black highlight, white text.
   On dark backgrounds: invert via the .on-dark hook so selection stays visible. */
::selection { background: #000; color: #fff; }
::-moz-selection { background: #000; color: #fff; }
.on-dark ::selection,
.on-dark::selection,
footer ::selection,
footer::selection { background: #fff; color: #000; }
.on-dark ::-moz-selection,
.on-dark::-moz-selection,
footer ::-moz-selection,
footer::-moz-selection { background: #fff; color: #000; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 2.4rem; line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; }
h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
p { margin: 0 0 1em; }

/* ===== Responsive container widths ===== */
.wrap { max-width: 100%; margin: 0 auto; padding: 0 16px; }

@media (min-width: 720px) {
  .wrap { max-width: 880px; padding: 0 22px; }
  h1 { font-size: 3.2rem; }
  h2 { font-size: 1.25rem; }
  body { font-size: 17px; }
}

@media (min-width: 1100px) {
  .wrap { max-width: 1240px; padding: 0 32px; }
  h1 { font-size: 4rem; letter-spacing: -0.045em; }
  h2 { font-size: 1.4rem; }
  body { font-size: 18px; }
}

/* ===== Body padding for fixed topbar =====
   The fixed topbar's height is 2 × --shell-gutter + content height (~30px
   for the brand logo). Non-Hero pages add padding-top equal to that
   computed height plus a bit of breathing so the first content row is
   never hidden behind the topbar. body-prefixed selectors raise
   specificity above each page's inline rule. */
body .page-hero,
body .article {
  padding-top: calc(var(--shell-gutter) * 2 + 60px);
}

/* ===== Topbar (fixed, color-flipping over dark sections) =====
   Pinned to viewport top via position: fixed so the Hero can start at y=0
   and the topbar floats on top of it. The topbar itself spans the full
   viewport width; horizontal alignment with content is achieved via calc()
   side-padding that leaves the inner padding equal to the content max-width's
   gutter on each side. When .topbar.over-dark is set (JS adds it while the
   topbar overlaps the dark Hero), the background becomes transparent and
   text/icons flip to white. All transitions are smooth so the change reads
   as motion, not a jump. */
:root {
  /* Global "shell" gutter — used by the topbar padding (all four sides),
     non-hero page top padding, and the mobile menu top padding.
     Mobile phones use a tighter 22px so the topbar doesn't eat 12-15%
     of the viewport height. From 601px up the gutter scales with viewport
     height to match the Hero text inset. */
  --shell-gutter: 22px;
}
@media (min-width: 601px) {
  :root { --shell-gutter: clamp(40px, 6vh, 80px); }
}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* Top / right / bottom / left all use the same gutter so the topbar's
     visible inset matches the Hero's edge gap on all four sides. */
  padding: var(--shell-gutter);
  background: transparent;
  color: #000;
  transition: color 0.35s ease;
}
.topbar.over-dark {
  color: #fff;
}
.topbar.over-dark .brand-logo {
  filter: brightness(0) invert(1);
}
.topbar .brand-logo {
  transition: filter 0.35s ease;
}
.topbar.over-dark .header-nav a,
.topbar.over-dark .lang-current,
.topbar.over-dark .menu-toggle {
  color: #fff;
  border-color: #fff;
}
.topbar .header-nav a,
.topbar .lang-current,
.topbar .menu-toggle {
  transition: color 0.35s ease, border-color 0.35s ease, background 0.2s ease;
}
.topbar.over-dark .lang-current:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* No vw-based padding overrides — `padding: var(--shell-gutter)` already
   gives a uniform inset on every viewport (clamp scales with vh). */
.brand { display: flex; align-items: center; }
.brand a { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 60vw;
}
@media (min-width: 720px) { .brand-logo { height: 26px; } }
@media (min-width: 1100px) { .brand-logo { height: 30px; } }

/* ===== Header navigation ===== */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-nav { display: none; }
@media (min-width: 720px) {
  .header-nav { display: inline-flex; gap: 18px; align-items: center; }
}
@media (min-width: 1100px) {
  .header-nav { gap: 22px; }
}
.header-nav a {
  font-size: 0.78rem;
  color: #000;
  text-decoration: none;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.header-nav a:hover { opacity: 0.55; }
.header-nav a.active { font-weight: 700; }

/* ===== Hamburger menu toggle (mobile only) =====
   On desktop the topbar shows nav links + language dropdown directly.
   On narrow viewports there isn't room for both, so we collapse them into
   a single hamburger button that opens a full-viewport drop-down panel. */
.menu-toggle { display: none; }
@media (max-width: 719px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid #000;
    cursor: pointer;
    padding: 0;
    color: #000;
    -webkit-tap-highlight-color: transparent;
  }
  /* On mobile, the language dropdown lives inside the hamburger menu instead */
  .header-right .lang-dropdown { display: none; }
}
.menu-toggle .bars {
  display: block;
  position: relative;
  width: 18px;
  height: 12px;
}
.menu-toggle .bars::before,
.menu-toggle .bars::after,
.menu-toggle .bars > span {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.28s ease, opacity 0.18s ease, top 0.28s ease, bottom 0.28s ease;
}
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars > span { top: 50%; transform: translateY(-50%); }
.menu-toggle .bars::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .bars::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .bars > span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ===== Mobile drop-down menu panel =====
   Slides down from the top, full viewport, white background. Body scroll
   is locked while open so the page beneath doesn't move. The topbar stays
   visible above the panel because the panel itself reserves padding-top
   equal to the topbar height, and its z-index is below the topbar. */
.mobile-menu { display: none; }
@media (max-width: 719px) {
  .mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    inset-inline: 0;
    background: #fff;
    z-index: 90;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    /* Top padding matches the topbar height so menu items don't sit
       under the (z-index: 110) topbar. */
    padding: calc(var(--shell-gutter) * 2 + 60px) 16px 40px;
    visibility: hidden;
  }
  .mobile-menu.open {
    transform: translateY(0);
    visibility: visible;
  }
  /* Topbar stays above the panel so the X button is reachable.
     position: sticky already keeps it at viewport top; just bump the z-index. */
  .topbar { z-index: 110; }
  body.mobile-menu-open { overflow: hidden; }
  /* RTL: panel still slides in from the top (vertical), no horizontal flip needed */
  html[data-lang="ar"] .mobile-menu { direction: rtl; }
}
.mobile-menu-section {
  border-top: 1px solid #000;
  padding: 22px 0 6px;
  margin-top: 14px;
}
.mobile-menu-section:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}
.mobile-menu-section h4 {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #999;
  font-weight: 600;
  margin: 0 0 10px;
}
.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu-list li { margin: 0; }
.mobile-menu-list a,
.mobile-menu-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #000;
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-list li:last-child > a,
.mobile-menu-list li:last-child > button {
  border-bottom: none;
}
.mobile-menu-list a.active,
.mobile-menu-list button.active {
  font-weight: 700;
}
.mobile-menu-list .lang-code {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #888;
}
.mobile-menu-list .check {
  font-size: 0.95rem;
  color: #000;
  visibility: hidden;
}
.mobile-menu-list a.active .check,
.mobile-menu-list button.active .check {
  visibility: visible;
}

/* ===== Language dropdown ===== */
.lang-dropdown { position: relative; display: inline-block; }
.lang-current {
  background: none;
  border: 1px solid #000;
  padding: 5px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 56px;
  justify-content: space-between;
}
.lang-current:hover { background: #f5f5f5; }
.lang-arrow {
  font-size: 0.55rem;
  line-height: 1;
  transition: transform 0.15s;
}
.lang-dropdown.open .lang-arrow { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid #000;
  min-width: 180px;
  z-index: 1000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }
.lang-menu button {
  width: 100%;
  text-align: start;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  color: #000;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.lang-menu button:hover { background: #f5f5f5; }
.lang-menu button.active { background: #000; color: #fff; }
.lang-menu .lang-code {
  font-size: 0.7rem; letter-spacing: 0.1em;
  font-weight: 600; flex-shrink: 0;
}
.lang-menu .lang-name { color: inherit; opacity: 0.85; }

/* ===== Footer (dark, multi-column corporate layout) =====
   Painted on solid black. Selection inverts (see ::selection rules) so highlighted
   text stays visible. 4 columns on desktop (Brand / Sitemap / Group / Follow),
   2 columns on tablet, single column on mobile. */
footer {
  padding: 64px 0 32px;
  font-size: 0.78rem;
  background: #000;
  color: #fff;
}
@media (min-width: 720px) { footer { padding: 88px 0 40px; } }
@media (min-width: 1100px) { footer { padding: 112px 0 48px; } }
footer .wrap { border-top: none; padding-top: 0; }
footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 720px) {
  footer .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
  }
}
@media (min-width: 1100px) {
  footer .footer-grid { gap: 3rem; }
}
.footer-block { min-width: 0; }

footer h4 {
  font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600;
  margin: 0 0 14px;
  color: #fff;
}
footer h4.brand-name {
  font-size: 0.95rem; letter-spacing: 0.01em;
  text-transform: none; font-weight: 600;
  margin-bottom: 6px;
}
footer p { margin: 0; line-height: 1.6; color: #fff; }
footer .footer-tagline {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #aaa;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Sub-blocks within the brand column (Offices, Contact) */
.footer-sub {
  margin-top: 24px;
}
.footer-sub h5 {
  font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600;
  color: #888;
  margin: 0 0 6px;
}

/* Stacked link list used by Sitemap / Group / Follow columns */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin: 0;
  padding: 5px 0;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  transition: opacity 0.15s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.footer-links a:hover { opacity: 0.6; }
.footer-links a .ext {
  font-size: 0.7em;
  color: #888;
  margin-inline-start: 2px;
}
.footer-links .footer-link-disabled {
  font-size: 0.85rem;
  color: #666;
  font-style: normal;
  letter-spacing: 0.01em;
}

/* Mailto / inline links anywhere else in the footer */
footer a { color: #fff; text-decoration-color: rgba(255,255,255,0.5); }
footer a:hover { text-decoration-color: #fff; }

/* Legal band — copyright + policy links separated by hairline */
.footer-legal {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.72rem;
  color: #777;
}
@media (min-width: 720px) {
  .footer-legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    padding-top: 1.8rem;
  }
}
.footer-legal-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-legal-policies a {
  color: #aaa;
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  transition: color 0.15s ease;
}
.footer-legal-policies a:hover { color: #fff; }

/* Backwards compatibility: keep .legal class working in case other pages still
   render it; but new structure uses .footer-legal instead. */
footer .legal {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid #2a2a2a;
  font-size: 0.72rem; color: #777;
}

/* ===== Edge-to-edge brand mark (bottom of page, dark) =====
   Painted on black to extend the dark footer all the way down.
   The wordmark image is a black-ink PNG, so we invert it to render white.
   `brightness(0) invert(1)` flattens any partial transparency artifacts to
   pure white, then the alpha channel still carves the BEDROCK SPACE letters. */
.brand-mark {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #000;
}
.brand-mark-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: brightness(0) invert(1);
}

/* ===== Language switching ===== */
[data-en], [data-ar], [data-hi], [data-zh], [data-es], [data-jp] { display: none; }
html[data-lang="en"] [data-en] { display: revert; }
html[data-lang="ar"] [data-ar] { display: revert; }
html[data-lang="hi"] [data-hi] { display: revert; }
html[data-lang="zh"] [data-zh] { display: revert; }
html[data-lang="es"] [data-es] { display: revert; }
html[data-lang="jp"] [data-jp] { display: revert; }
html[data-lang="en"] span[data-en],
html[data-lang="ar"] span[data-ar],
html[data-lang="hi"] span[data-hi],
html[data-lang="zh"] span[data-zh],
html[data-lang="es"] span[data-es],
html[data-lang="jp"] span[data-jp] { display: inline; }

/* ===== Arabic — right-to-left layout ===== */
html[data-lang="ar"] body { direction: rtl; }
html[data-lang="ar"] .topbar,
html[data-lang="ar"] .lang-toggle { direction: ltr; }

/* ===== Legal / policy pages (Privacy / Terms / Cookies / Accessibility) ===== */
.legal-doc h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.2em 0 0.7em;
  line-height: 1.3;
}
.legal-doc h3 {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 1.6em 0 0.5em;
  line-height: 1.35;
}
@media (min-width: 720px) {
  .legal-doc h2 { font-size: 1.2rem; }
  .legal-doc h3 { font-size: 1.05rem; }
}
.legal-doc p { margin: 0 0 1.1em; line-height: 1.75; }
.legal-doc ul, .legal-doc ol { margin: 0 0 1.2em; padding-inline-start: 1.5em; }
.legal-doc li { margin-bottom: 0.4em; line-height: 1.7; }
.legal-doc strong { font-weight: 600; }
.legal-doc .last-updated {
  font-size: 0.78rem;
  color: #777;
  margin: 0 0 28px;
  letter-spacing: 0.04em;
}
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 0.6em 0 1.4em;
}
.legal-doc table th,
.legal-doc table td {
  text-align: start;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
}
.legal-doc table th {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #444;
  border-bottom: 1px solid #000;
}
.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #f4f4f4;
  padding: 1px 6px;
  border-radius: 2px;
}

/* ===== Cookie consent banner ===== */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  background: #000;
  color: #fff;
  border-top: 1px solid #333;
  padding: 16px 16px 18px;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 0.82rem;
  line-height: 1.55;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}
.cookie-banner.open { transform: translateY(0); }
@media (min-width: 720px) { .cookie-banner { padding: 20px 22px 22px; } }
.cookie-banner-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 720px) {
  .cookie-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }
}
.cookie-banner-text {
  margin: 0; font-size: 0.82rem; color: #ddd; line-height: 1.6; flex: 1 1 auto; min-width: 0;
}
.cookie-banner-link {
  color: #fff; text-decoration: underline; text-underline-offset: 2px;
  margin-inline-start: 4px; white-space: nowrap;
}
.cookie-banner-link:hover { opacity: 0.7; }
.cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner-actions button {
  flex: 1 1 auto; font: inherit; font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 9px 18px; cursor: pointer;
  border: 1px solid #fff; background: transparent; color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
@media (min-width: 720px) { .cookie-banner-actions button { flex: 0 0 auto; } }
.cookie-banner-actions button:hover { background: #fff; color: #000; }
.cookie-banner-actions .cookie-accept { background: #fff; color: #000; }
.cookie-banner-actions .cookie-accept:hover { background: #ddd; border-color: #ddd; color: #000; }
.cookie-banner ::selection { background: #fff; color: #000; }
.cookie-banner ::-moz-selection { background: #fff; color: #000; }

/* ===== Print ===== */
@media print {
  .topbar, footer, .brand-mark, .cookie-banner { display: none; }
}