/* =====================================================================================================
   Arkemis shared design system (v3). arkemis.space, hx1.arkemis.space and plinth.arkemis.space are one
   site: keep an identical copy of this file on every subdomain. Page styles load after it and only add.
   Fully static: nothing in this system moves.

   Contents
   1. Fonts      Archivo, widened (headings), Instrument Serif italic (one accent line per heading),
                 Inter (text), IBM Plex Mono as "Plex Mono" (labels), Bricolage (the wordmark only).
   2. Tokens     surfaces  --bg (warm near-white) --bg-2 --card (white)
                 ink       --ink #14141c, --ink-2 (violet-grey), --ink-3
                 lines     --hair --hair-2
                 accent    --accent (Arkemis sky) --accent-ink --accent-tint
                 pastels   --hl-sky --hl-aqua --hl-lilac --hl-peach --hl-mint --hl-sand (highlight fills)
                 type      --display --serif --f --mono   radii --r-win 12 --r-btn 4 --r-nav 14
                 layout    --gutter --maxw --head-h
   3. Page       body: softly hatched outer background with faint grain; .column: the framed centre column
                 with side hairlines; .band: a hatched hairline rule band between sections.
   4. Type       .label (mono caps), .hl (mono label on a pastel highlight: .hl-aqua .hl-lilac .hl-peach
                 .hl-mint .hl-sand), .h-display, .h-1, .h-2, .h-3, .serif (the italic accent line), .lead
   5. Buttons    .btn / .b: square-ish (radius 4). .btn-pri / .b-pri: sky tint with four corner handles;
                 .btn-sec / .b-sec: white hairline. .btn-lg, .btn-sm / .b-sm. At least 44 px on phones.
   6. Window     .win: a framed product window: hairline border, white ring and deep soft shadow;
                 .win-bar (three dots and a mono title) optional.
   7. Status     .status (mono, small square marker, pastel ground), .status.live, .status.dev
   8. Nav        header.site-head.nav: centred floating capsule, top 12 px (8 px on phones), height 56,
                 radius 14, padding 6: .brand, .nav-links (36 px, current page on a pastel highlight),
                 .head-right (.head-cta, .menu-btn on phones), .menu sheet (.menu-links, .menu-sites).
   9. Footer     footer.site-foot: a framed sky-gradient band holding the booking hub: .routes of .route-pick
                 options (aria-pressed = the calendar shown) and #cal-panel, the always-open Cal.com embed;
                 then .foot-row (.brand, .family) and .fine.
   ===================================================================================================== */

/* 1. Fonts */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }

/* 2. Tokens */
:root {
  --bg: #fdfbf9; --bg-2: #f4f0ec; --card: #ffffff;
  --ink: #14141c; --ink-2: #57536b; --ink-3: #6a667d;
  --hair: rgba(20, 20, 28, .12); --hair-2: rgba(20, 20, 28, .22);
  --accent: #3b78cf; --accent-ink: #2a5fae; --accent-tint: #e6effc;
  --hl-sky: #dcecfb; --hl-aqua: #d3f0ec; --hl-lilac: #e9e4f8; --hl-peach: #fde5d4; --hl-mint: #daf2e2; --hl-sand: #f6ebd2;
  --display: "Archivo", "Inter", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --f: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-win: 12px; --r-btn: 4px; --r-nav: 14px;
  --gutter: clamp(20px, 4vw, 56px); --maxw: 1200px; --head-h: 84px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 0 0.11 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 900px) { :root { --head-h: 72px; } }

/* 3. Page */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: var(--head-h); }
body { margin: 0; color: var(--ink); font: 400 16px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-color: var(--bg-2); background-image: var(--grain), repeating-linear-gradient(135deg, rgba(20, 20, 28, .045) 0 1px, transparent 1px 9px); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 4px; }
.skip:focus { top: 12px; }
.column { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; background-color: var(--bg); background-image: var(--grain); border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.band { height: 40px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: repeating-linear-gradient(135deg, rgba(20, 20, 28, .06) 0 1px, transparent 1px 8px); }

/* 4. Type */
.label { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hl { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 3px; font: 500 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--hl-sky); }
.hl-aqua { background: var(--hl-aqua); } .hl-lilac { background: var(--hl-lilac); } .hl-peach { background: var(--hl-peach); } .hl-mint { background: var(--hl-mint); } .hl-sand { background: var(--hl-sand); }
.h-display, .h-1, .h-2 { font-family: var(--display); font-stretch: 118%; font-weight: 600; color: var(--ink); }
.h-display { font-size: clamp(38px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -.035em; }
.h-1 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.03em; }
.h-2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.02em; }
.h-3 { font: 600 18px/1.35 var(--f); letter-spacing: -.01em; }
.serif { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; font-size: 1.08em; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }

/* 5. Buttons */
.btn, .b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; font: 500 14.5px/1 var(--f); text-decoration: none; white-space: nowrap; cursor: pointer;
  border-radius: var(--r-btn); border: 1px solid var(--hair-2); background: var(--card); color: var(--ink); transition: background-color .15s, border-color .15s; }
.btn-lg { min-height: 48px; padding: 0 24px; }
.btn-sm, .b-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-sec:hover, .b-sec:hover { border-color: var(--ink); }
.btn-pri, .b-pri { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
.btn-pri::before, .b-pri::before { content: ""; position: absolute; inset: -4px; pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 5px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 5px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 5px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 5px 5px no-repeat; }
.btn-pri:hover, .b-pri:hover { background: #d8e6fa; }
@media (max-width: 900px) { .btn, .b, .btn-sm, .b-sm { min-height: 44px; } }

/* 6. Window: framed product window with ring and deep shadow */
.win { margin: 0; border-radius: var(--r-win); background: var(--card); border: 1px solid var(--hair-2); overflow: hidden;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .92), 0 0 0 6px var(--hair), 0 40px 80px -36px rgba(20, 20, 28, .36), 0 12px 28px -18px rgba(20, 20, 28, .18); }
.win-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--hair); background: #fbfaf8; }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--hair-2); background: #fff; }
.win-bar span { margin-left: 8px; font: 500 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.win img { width: 100%; }

/* 7. Status */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 3px; background: var(--hl-lilac); font: 500 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.status::before { content: ""; width: 6px; height: 6px; background: var(--ink-3); }
.status.live { background: var(--hl-mint); } .status.live::before { background: #1f9d55; }
.status.dev { background: var(--hl-sky); } .status.dev::before { background: var(--accent); }

/* 8. Nav: the floating capsule (static) */
.site-head.nav { position: fixed; z-index: 50; top: 12px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  height: 56px; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; margin: 0;
  border: 1px solid var(--hair); border-radius: var(--r-nav); background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), 0 14px 30px -18px rgba(20, 20, 28, .35); }
.site-head.nav .brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-right: 6px; text-decoration: none; color: var(--ink); }
.site-head.nav .mark { width: 16px; height: 18px; fill: currentColor; }
.site-head.nav .wordmark { font: 600 20px/1 "Bricolage", var(--f); letter-spacing: -.02em; transform: translateY(-1px); }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 36px; min-height: 36px; padding: 0 14px; border-radius: var(--r-btn); font: 500 14px var(--f); color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); background: rgba(20, 20, 28, .05); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--hl-sky); }
.site-head.nav .head-right { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.site-head.nav .head-cta { min-height: 40px; height: 40px; padding: 0 16px; font-size: 14px; margin: 4px; }
.site-head.nav .menu-btn { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair-2); border-radius: var(--r-btn); background: #fff; cursor: pointer; color: var(--ink); }
.site-head.nav .menu-btn i, .site-head.nav .menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; }
.site-head.nav .menu-btn :first-child { top: 18px; } .site-head.nav .menu-btn :last-child { top: 24px; }
.site-head.nav.open .menu-btn :first-child { transform: translateY(3px) rotate(45deg); }
.site-head.nav.open .menu-btn :last-child { transform: translateY(-3px) rotate(-45deg); }
.site-head.nav .menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; min-width: 300px; padding: 8px 16px 16px; border: 1px solid var(--hair); border-radius: var(--r-nav);
  background: #fff; box-shadow: 0 30px 60px -30px rgba(20, 20, 28, .4); }
.site-head.nav .menu[hidden] { display: none; }
.menu-links { display: grid; }
.menu-links a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--hair); font: 500 17px var(--f); text-decoration: none; color: var(--ink); }
.menu-sites { display: flex; gap: 6px; margin-top: 14px; }
.menu-sites a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--hair); border-radius: var(--r-btn); font: 500 14px var(--f); color: var(--ink-2); text-decoration: none; }
.menu-sites a[aria-current="page"] { background: var(--hl-sky); color: var(--ink); }
@media (max-width: 900px) {
  .site-head.nav { top: 8px; width: calc(100% - 16px); max-width: 460px; padding: 6px 6px 6px 14px; }
  .nav-links { display: none; }
  .site-head.nav .head-right { margin-left: auto; }
  .site-head.nav .head-cta { min-height: 44px; height: 44px; margin: 0 4px; }
  .site-head.nav .menu-btn { display: inline-block; }
}

/* 9. Footer: a framed sky-gradient band with the booking hub (the calendar is always open) */
.site-foot { position: relative; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 24px 0; background-color: var(--bg); background-image: var(--grain); border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.site-foot .foot { margin: 0 clamp(12px, 2vw, 24px); padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) 28px; border-radius: var(--r-win); border: 1px solid rgba(20, 20, 28, .2); color: #fff;
  /* deep enough that white text keeps at least 4.5:1 everywhere on the band */
  background: radial-gradient(40% 55% at 100% 0%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(135deg, #173a6e 0%, #2557a0 60%, #2f68b8 100%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .92), 0 0 0 6px var(--hair), 0 40px 80px -40px rgba(20, 20, 28, .4); }
.site-foot .label { color: rgba(255, 255, 255, .84); }
.site-foot h2 { margin: 10px 0 0; font: 600 clamp(32px, 4vw, 52px)/1.04 var(--display); font-stretch: 118%; letter-spacing: -.03em; color: #fff; }
.site-foot h2 .serif { display: inline; }
.site-foot .foot-sub { margin: 12px 0 0; max-width: 60ch; font-size: 16px; color: rgba(255, 255, 255, .9); }
.site-foot .routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.route-pick { display: grid; align-content: start; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.route-pick:hover { background: rgba(255, 255, 255, .12); }
.route-pick[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.route-pick .route-k { font: 500 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .84); }
.route-pick .route-h { font: 600 20px/1.2 var(--display); font-stretch: 112%; letter-spacing: -.015em; }
.route-pick .route-p { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.route-pick .route-go { margin-top: 8px; font: 500 12px var(--mono); letter-spacing: .03em; color: rgba(255, 255, 255, .84); }
.route-pick[aria-pressed="true"] .route-k, .route-pick[aria-pressed="true"] .route-go { color: var(--accent-ink); }
.route-pick[aria-pressed="true"] .route-p { color: var(--ink-2); }
.site-foot .cal-panel { margin-top: 12px; border-radius: 8px; overflow: hidden; background: #fff; color: var(--ink); }
.site-foot .embed-frame { position: relative; height: 680px; background: #fff; }
.site-foot .embed-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.site-foot .embed-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 500 13px var(--mono); color: var(--ink-3); }
.site-foot .foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); }
.site-foot .brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.site-foot .mark { width: 16px; height: 18px; fill: currentColor; }
.site-foot .wordmark { font: 600 20px/1 "Bricolage", var(--f); letter-spacing: -.02em; }
.site-foot .family { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.site-foot .family a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: rgba(255, 255, 255, .92); text-decoration: none; }
.site-foot .family a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-foot .fine { margin: 14px 0 0; font-size: 13px; color: rgba(255, 255, 255, .8); }
@media (max-width: 900px) {
  .site-foot .routes { grid-template-columns: 1fr; }
  .site-foot .embed-frame { height: 720px; }
  .site-foot .foot-row { flex-direction: column; align-items: flex-start; }
}