/* MAJO site: tokens the design system doesn't carry, plus motion infrastructure.
   Everything else stays inline on the elements. */
:root {
  --color-accent: #1f4e9c; --color-accent-2: #0f8b8d;
  --color-accent-100: #e6edf9; --color-accent-200: #c6d8f1; --color-accent-300: #9dbbe6;
  --color-accent-400: #5f8ed2; --color-accent-500: #3468b8; --color-accent-600: #24539f;
  --color-accent-700: #1b4180; --color-accent-800: #122c58; --color-accent-900: #0c1e3c;
  --c-blue: #1f4e9c; --c-blue-deep: #122c58; --c-blue-light: #8fb3ea; --c-blue-tint: #eaf1fb;
  --c-teal: #0f8b8d; --c-teal-tint: #dff1f1; --c-teal-deep: #0a3a3b;
  --c-ochre: #c9971a; --c-slate: #4b5b6b;
  --color-bg: #fbf9f6; --color-surface: #ffffff;
  --color-divider: color-mix(in srgb, #1f2937 14%, transparent);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --c-soft: 0 18px 44px -28px rgba(18,44,88,0.32);
  --c-photo: grayscale(1) contrast(1.04) sepia(0.14) saturate(1.15);
}
html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; background: var(--color-bg); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
h1, h2, h3 { letter-spacing: -0.012em; }
.btn { border-radius: 999px !important; font-weight: 700; letter-spacing: 0.01em;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary:hover { box-shadow: 0 12px 26px -16px rgba(31,78,156,.75); }
/* the nav's `.nav a` colour outranks `.btn-primary` on the anchor CTA */
[data-nav] .btn-primary, .nav .btn-primary { color: var(--color-bg) !important; }
.input, textarea.input { border-radius: 14px !important; border-width: 1px !important; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease; }
.input:focus-visible, textarea.input:focus-visible { box-shadow: 0 0 0 4px var(--c-blue-tint); }

/* — FAQ disclosures — */
[data-faq] { border-top: 1px solid var(--color-divider); }
[data-faq] summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 20px 4px; font-family: var(--font-heading); font-weight: 800; font-size: 18.5px;
  transition: color .2s ease; }
[data-faq] summary::-webkit-details-marker { display: none; }
[data-faq] summary::after { content: "+"; margin-left: auto; font-size: 24px; font-weight: 700;
  color: var(--c-blue); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
[data-faq][open] summary::after { transform: rotate(45deg); }
[data-faq] summary:hover { color: var(--c-blue); }
[data-faq] > div { padding: 0 4px 22px; font-size: 15.5px; line-height: 25px; max-width: 68ch;
  color: color-mix(in srgb, var(--color-text) 80%, transparent); animation: majo-open .35s ease both; }
@keyframes majo-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* — expandable step cards — */
[data-step] { cursor: pointer; position: relative; transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
[data-step][data-tone="dark"]:hover, [data-step][data-tone="dark"][data-open="true"] { background: #1b2b4c !important; }
[data-step][data-tone="light"]:hover, [data-step][data-tone="light"][data-open="true"] { transform: translateY(-4px);
  box-shadow: 0 26px 52px -30px rgba(18,44,88,.42); }
[data-step] [data-plus] { transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
[data-step][data-open="true"] [data-plus] { transform: rotate(135deg); }
[data-step-detail] { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease, margin-top .45s ease;
  margin-top: 0; }
[data-step-detail] > div { overflow: hidden; }
[data-step-detail][data-open="true"] { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
[data-step]:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -4px; }
[data-step][data-tone="dark"]:focus-visible { outline-color: #7fa8e8; }

/* — checklist marks — */
[data-check] { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 24px; }
[data-check]::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px;
  border-radius: 999px; background: var(--c-blue-tint);
  box-shadow: inset 0 0 0 2px var(--c-blue); }

/* — scroll reveal — */
[data-reveal] { transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
[data-reveal][data-armed] { opacity: 0; transform: translateY(24px); }
[data-reveal][data-in] { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .07s; }
[data-delay="2"] { transition-delay: .14s; }
[data-delay="3"] { transition-delay: .21s; }
[data-delay="4"] { transition-delay: .28s; }
[data-delay="5"] { transition-delay: .35s; }
[data-delay="6"] { transition-delay: .42s; }

/* — hover motion — */
[data-lift] { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; }
[data-lift]:hover { transform: translateY(-7px); box-shadow: 0 28px 56px -30px rgba(18,44,88,.45); }
[data-row] { transition: background .25s ease, padding-left .25s ease; border-radius: 18px; }
[data-row]:hover { background: #fff; padding-left: 18px; box-shadow: var(--c-soft); }
[data-chip] { transition: transform .2s ease, box-shadow .2s ease; }
[data-chip]:hover { transform: translateY(-3px) scale(1.03); }

/* — photographs — */
[data-photo] { overflow: hidden; }
[data-photo] image-slot { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
[data-photo]:hover image-slot { transform: scale(1.05); }

/* — nav — */
[data-nav] { border-bottom: 1px solid var(--color-divider) !important;
  transition: box-shadow .25s ease, background .25s ease; }
[data-nav][data-scrolled] { box-shadow: 0 10px 30px -26px rgba(18,44,88,.8);
  background: color-mix(in srgb, #fbf9f6 88%, transparent); backdrop-filter: blur(10px); }
[data-link] { position: relative; }
[data-link]::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px;
  background: var(--c-blue); transition: right .28s cubic-bezier(.2,.7,.2,1); }
[data-link]:hover::after, [data-link][aria-current="page"]::after { right: 0; }

/* — ambient motion — */
@keyframes majo-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
[data-drift] { background-size: 220% 220%; animation: majo-drift 18s ease-in-out infinite; }
@keyframes majo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
[data-float] { animation: majo-float 7s ease-in-out infinite; }
@keyframes majo-grid { from { background-position: 0 0; } to { background-position: 64px 64px; } }
[data-grid] { animation: majo-grid 14s linear infinite; }

/* — mobile: the nav collapses to a scrolling link rail, controls stay thumb-sized — */
@media (max-width: 820px) {
  [data-nav] { flex-wrap: wrap; row-gap: 10px; }
  [data-navlinks] { order: 3; width: 100%; overflow-x: auto; gap: 20px !important;
    padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  [data-navlinks]::-webkit-scrollbar { display: none; }
  [data-nav] .btn { margin-left: auto; }
  [data-helprow] { grid-template-columns: 54px minmax(0,1fr) !important; row-gap: 10px !important; }
  [data-helprow] > p { grid-column: 2; }
  [data-row]:hover { padding-left: 0; }
}
@media (max-width: 520px) {
  [data-nav] .btn { width: 100%; margin-left: 0; justify-content: center; }
  .btn { min-height: 46px; }
}

/* — page signatures: one constant ambient animation per page — */
@keyframes majo-radar { to { transform: rotate(360deg); } }
[data-radar] { animation: majo-radar 7s linear infinite; }
@keyframes majo-pulse { 0% { transform: scale(.55); opacity: .5; } 70% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
[data-ping] { animation: majo-pulse 3.4s ease-out infinite; }
[data-ping-2] { animation: majo-pulse 3.4s ease-out infinite 1.1s; }
[data-ping-3] { animation: majo-pulse 3.4s ease-out infinite 2.2s; }
@keyframes majo-hatch { to { background-position: 96px 0; } }
[data-hatch] { animation: majo-hatch 6s linear infinite; }
@keyframes majo-bubble { 0%, 100% { transform: translateX(-38px); } 50% { transform: translateX(38px); } }
[data-bubble] { animation: majo-bubble 6.5s ease-in-out infinite; }
@keyframes majo-scan { 0% { transform: translateX(-30%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }
[data-scan] { animation: majo-scan 8s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes majo-arc { to { transform: rotate(360deg); } }
@keyframes majo-dash { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 120; } }
[data-arc] { animation: majo-arc 22s linear infinite; }
[data-arc] circle { animation: majo-dash 9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-drift], [data-float], [data-grid], [data-radar], [data-ping], [data-ping-2],
  [data-ping-3], [data-hatch], [data-bubble], [data-scan], [data-arc], [data-arc] circle { animation: none; }
  [data-lift]:hover, [data-chip]:hover, [data-row]:hover { transform: none; }
}