/* hobcompass.com home page: "Sunset Voyage" look for HOB Compass.
   The other pages (privacy, testers, training) still use site.css. */
:root {
  --sky: #fff4ea;
  --sand: #fffaf5;
  --ink: #2b2320;
  --muted: #5d4d45;
  --line: #f0e3d8;
  --coral: #c4442f;
  --teal: #0f6c6a;
  --mango: #9a6410;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--sand); }
body {
  margin: 0; min-height: 100vh; position: relative; overflow-x: hidden;
  background: linear-gradient(var(--sky), var(--sand) 60%);
  color: var(--ink); font: 16px/1.55 var(--sans);
}
.sun {
  position: absolute; right: 8%; top: 40px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(#ffcf7a, #f6a25a 65%, transparent 66%); opacity: .5; pointer-events: none;
}
@media (max-width: 600px) { .sun { width: 130px; height: 130px; right: 0; top: -50px; } }
.sea {
  position: absolute; inset: auto 0 0 0; height: 160px; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(15,108,106,.07) 14px 16px);
}
.page {
  position: relative; max-width: 1040px; margin: 0 auto;
  padding: 56px max(20px, env(safe-area-inset-right)) 72px max(20px, env(safe-area-inset-left));
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 30px; height: 27px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6d5a50; }
h1 { margin: 10px 0 0; font: 400 clamp(40px, 6.5vw, 68px)/1.05 var(--serif); }
.ttl { display: inline-flex; align-items: center; }
.ttl { gap: .22em; }
.ttl .mark { width: 1.15em; height: 1.15em; flex: none; }
.lede { max-width: 58ch; margin: 14px 0 36px; color: var(--muted); font-size: 17px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(120,60,30,.45); }
a.card:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.teal .ico { background: #d8efee; color: var(--teal); }
.coral .ico { background: #fde3dd; color: var(--coral); }
.mango .ico { background: #fbedcc; color: var(--mango); }
.tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.card h2 { margin: 0; font: 400 22px/1.2 var(--serif); }
.card p { margin: 0; flex: 1; color: var(--muted); }
.go { font-weight: 800; color: var(--teal); }
.soon .go { color: #8a7a70; }
.foot { margin-top: 32px; font-size: 13px; color: #7a6a60; }
.foot p { margin: 4px 0; }
.foot a { color: var(--teal); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }