/* Zyric Grid: grid of pathways */
:root {
  --blue: #043fbf;
  --blue-deep: #022a85;
  --navy: #021a52;
  --yellow: #ffff00;
  --yellow-soft: #fffbb0;
  --paper: #f6f8ff;
  --ink: #0b1633;
  --muted: #45507a;
  --grid: rgba(4, 63, 191, .09);
  --on-dark: rgba(245, 248, 255, .95);
  --on-dark-soft: rgba(228, 236, 255, .84);
  --head: "Tomorrow", "Arial Narrow", system-ui, sans-serif;
  --body: "Open Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); margin: 0; line-height: 1.08; color: var(--navy); letter-spacing: -.01em; }
p { margin: 0; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--navy); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 6px var(--blue); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--blue); color: var(--on-dark); border-bottom: 4px solid var(--yellow); transition: box-shadow .25s; }
.site-header.scrolled { box-shadow: 0 10px 24px -14px rgba(2, 26, 82, .8); }
.head-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 1.28rem; color: #fff; }
.brand img { width: 42px; height: 42px; object-fit: cover; border: 2px solid var(--yellow); }
.primary-nav { display: flex; align-items: center; gap: 2px; }
.primary-nav a { text-decoration: none; font-family: var(--head); font-weight: 600; font-size: .98rem; padding: 9px 14px; color: var(--on-dark); transition: background .2s, color .2s; }
.primary-nav .nav-cta { background: var(--yellow); color: var(--navy); margin-left: 10px; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 2px solid var(--yellow); background: transparent; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--yellow); transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 700; font-size: 1.02rem; text-decoration: none; padding: 14px 26px; border: 2px solid transparent; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.btn-yellow { background: var(--yellow); color: var(--navy); box-shadow: 5px 5px 0 var(--navy); }
.btn-outline { border-color: rgba(255, 255, 255, .8); color: #fff; }

/* Hero */
.hero { background: var(--blue); color: var(--on-dark); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 48px 48px; }
.hero-grid { position: relative; width: min(1180px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding: 80px 0 90px; }
.coord { font-family: var(--head); font-weight: 600; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 700; margin: 18px 0 22px; line-height: 1.18; }
.hero h1 mark { background: var(--yellow); color: var(--navy); padding: 0 .14em; display: inline-block; line-height: 1.1; margin-top: .08em; }
.lede { font-size: 1.15rem; color: var(--on-dark-soft); max-width: 33em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.hero-board { justify-self: center; width: 100%; max-width: 430px; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px; background: var(--navy); border: 3px solid var(--yellow); box-shadow: 12px 12px 0 rgba(255, 255, 0, .25); }
.t { position: relative; aspect-ratio: 1; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .18); transform: rotate(var(--to)); animation: turn 9s cubic-bezier(.6, .05, .25, 1) infinite; animation-delay: var(--d); }
.t::before { content: ""; position: absolute; left: 22%; right: 30%; top: 50%; height: 4px; margin-top: -2px; background: rgba(255, 255, 255, .7); }
.t::after { content: ""; position: absolute; right: 22%; top: 50%; width: 14px; height: 14px; border-top: 4px solid rgba(255, 255, 255, .7); border-right: 4px solid rgba(255, 255, 255, .7); transform: translateY(-50%) rotate(45deg); }
.t.on { background: var(--yellow); border-color: var(--yellow); animation-name: turnOn; }
.t.on::before { background: var(--blue); }
.t.on::after { border-color: var(--blue); }
.t.goal { background: #fff; border-color: #fff; animation: none; transform: none; }
.t.goal::before { left: 50%; top: 50%; right: auto; width: 34%; height: 34%; margin: 0; border-radius: 50%; background: transparent; border: 5px solid var(--blue); transform: translate(-50%, -50%); }
.t.goal::after { right: auto; left: 50%; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--blue); transform: translate(-50%, -50%); animation: pulse 1.8s ease-in-out infinite; }
@keyframes turn { 0%, 8% { transform: rotate(var(--from)); } 26%, 84% { transform: rotate(var(--to)); } 100% { transform: rotate(var(--from)); } }
@keyframes turnOn { 0%, 8% { transform: rotate(var(--from)); background: rgba(255, 255, 255, .08); } 26%, 84% { transform: rotate(var(--to)); background: var(--yellow); } 100% { transform: rotate(var(--from)); background: rgba(255, 255, 255, .08); } }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.6); } }
.board-cap { margin-top: 16px; font-family: var(--head); font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); text-align: center; }

/* Section helpers */
.tagline { font-family: var(--head); font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.tagline.light { color: var(--yellow); }
section h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.sec-head { max-width: 700px; margin-bottom: 44px; }

/* Structure blocks */
.structure { padding: 100px 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; }
.blocks { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 14px; }
.block { padding: 32px; border: 2px solid var(--navy); transition: transform .25s, box-shadow .25s; }
.b-head { grid-column: span 2; background: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.b-yellow { grid-column: span 2; background: var(--yellow); display: flex; align-items: center; }
.b-yellow p { font-family: var(--head); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.25; color: var(--navy); }
.b-text { grid-column: span 3; background: #fff; display: flex; align-items: center; }
.b-text p { font-size: 1.12rem; color: var(--muted); }
.b-blue { grid-column: span 1; background: var(--blue); color: var(--on-dark); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.b-blue p { font-weight: 600; color: var(--on-dark); }
.mini-grid { width: 96px; height: 96px; }
.mini-grid path { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.mini-grid .route { stroke: var(--yellow); stroke-width: 6; stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 4s ease-in-out infinite; }
.mini-grid circle { fill: #fff; }
.mini-grid .end { fill: var(--yellow); }
@keyframes draw { 40%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } }

/* Route steps */
.route { padding: 100px 0; background: #fff; border-block: 2px solid var(--navy); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.step { position: relative; padding: 36px 34px 38px; border: 2px solid var(--navy); margin-right: -2px; background: #fff; transition: background .25s, transform .25s, box-shadow .25s; }
.step:not(:last-child)::after { content: ""; position: absolute; right: -19px; top: 50px; width: 32px; height: 32px; background: var(--yellow); border: 2px solid var(--navy); z-index: 2; clip-path: polygon(0 20%, 55% 20%, 55% 0, 100% 50%, 55% 100%, 55% 80%, 0 80%); }
.step-k { display: inline-grid; place-items: center; width: 52px; height: 52px; background: var(--blue); color: var(--yellow); font-family: var(--head); font-weight: 700; font-size: 1.5rem; margin-bottom: 22px; transition: background .25s, color .25s; }
.step h3 { font-size: 1.6rem; margin-bottom: 10px; }
.step p { color: var(--muted); }

/* Balance */
.balance { padding: 100px 0; }
.balance-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.b-lede { color: var(--muted); font-size: 1.12rem; margin-top: 18px; }
.scale { background: var(--navy); color: var(--on-dark); padding: 36px; border: 2px solid var(--navy); box-shadow: 10px 10px 0 var(--yellow); }
.scale-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; margin-bottom: 18px; }
.s-name { font-family: var(--head); font-weight: 600; color: var(--on-dark); }
.s-bar { height: 22px; background: rgba(255, 255, 255, .1); display: block; }
.s-bar i { display: block; height: 100%; width: var(--w); background: var(--yellow); animation: grow 2.5s ease-in-out infinite alternate; }
.s-bar i.alt { background: #6f9bff; animation-delay: -1.25s; }
@keyframes grow { from { width: 38%; } to { width: 62%; } }
.scale-note { font-size: .95rem; color: var(--on-dark-soft); margin-top: 8px; }

/* Quote band (yellow, dark text) */
.quote-band { background: var(--yellow); border-block: 2px solid var(--navy); padding: 80px 0; overflow: hidden; }
.quote-inner { display: flex; align-items: center; gap: 36px; }
.q-arrow { flex: none; width: 90px; height: 90px; background: var(--blue); clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(12px); } }
.quote-band blockquote { margin: 0; }
.quote-band blockquote p { font-family: var(--head); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.12; color: var(--navy); }

/* FAQ */
.faq { padding: 100px 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; }
.faq-wrap { display: grid; grid-template-columns: .8fr 1.4fr; gap: 50px; align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 2px solid var(--navy); transition: transform .2s, box-shadow .2s; }
.faq-q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; font-family: var(--head); font-weight: 600; font-size: 1.12rem; color: var(--navy); }
.q-i { flex: none; width: 32px; height: 32px; background: var(--blue); position: relative; transition: transform .3s, background .3s; }
.q-i::after { content: ""; position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; border-right: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); transform: translate(-50%, -50%) rotate(45deg); }
.faq-item.open .q-i { transform: rotate(180deg); background: var(--navy); }
.faq-item.open { box-shadow: 6px 6px 0 var(--yellow); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-a > p { overflow: hidden; padding: 0 22px; color: var(--muted); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a > p { padding-bottom: 22px; }

/* Contact */
.contact { padding: 0 0 100px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; }
.contact-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.c-main { grid-row: span 2; background: var(--blue); color: var(--on-dark); padding: 48px; border: 2px solid var(--navy); }
.c-main h2 { color: #fff; margin-bottom: 14px; }
.c-main p:not(.tagline) { color: var(--on-dark-soft); font-size: 1.1rem; }
.c-tile { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 26px 28px; text-decoration: none; border: 2px solid var(--navy); transition: transform .2s, box-shadow .2s; }
.c-tile span { font-family: var(--head); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.c-tile b { font-family: var(--head); font-size: 1.2rem; overflow-wrap: anywhere; }
.c-mail { background: var(--yellow); color: var(--navy); }
.c-in { background: #fff; color: var(--navy); }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-dark-soft); padding: 28px 0; border-top: 4px solid var(--yellow); }
.foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: .95rem; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Hover life */
@media (hover: hover) and (pointer: fine) {
  .primary-nav a:hover { background: rgba(255, 255, 255, .12); color: var(--yellow); }
  .primary-nav .nav-cta:hover { background: #fff; color: var(--blue); }
  .btn:hover { transform: translate(-2px, -2px); }
  .btn-yellow:hover { box-shadow: 8px 8px 0 var(--navy); }
  .btn-outline:hover { background: #fff; color: var(--blue); }
  .block:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--navy); }
  .step:hover { background: var(--yellow-soft); z-index: 1; transform: translateY(-6px); box-shadow: 0 8px 0 var(--navy); }
  .step:hover .step-k { background: var(--yellow); color: var(--blue); }
  .faq-item:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--blue); }
  .c-tile:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--navy); }
  .scale:hover { box-shadow: 14px 14px 0 var(--yellow); }
}

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 60px 0 70px; }
  .hero-board { max-width: 360px; }
  .blocks { grid-template-columns: 1fr 1fr; }
  .b-head, .b-yellow, .b-text { grid-column: span 2; }
  .b-blue { grid-column: span 2; flex-direction: row; align-items: center; }
  .steps { grid-template-columns: 1fr; }
  .step { margin: 0 0 -2px; }
  .step:not(:last-child)::after { right: 34px; left: auto; top: auto; bottom: -19px; transform: rotate(90deg); }
  .balance-grid, .faq-wrap { grid-template-columns: 1fr; gap: 30px; }
  .contact-grid { grid-template-columns: 1fr; }
  .c-main { grid-row: auto; }
}
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .primary-nav { position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch; background: var(--blue); padding: 8px 24px 22px; border-bottom: 4px solid var(--yellow); display: none; }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 13px 6px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .primary-nav .nav-cta { margin: 12px 0 0; text-align: center; border: 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap, .hero-grid { width: calc(100% - 36px); }
  .hero-actions .btn { flex: 1 1 100%; }
  .board { gap: 6px; padding: 10px; box-shadow: 8px 8px 0 rgba(255, 255, 0, .25); }
  .t::after { width: 10px; height: 10px; border-width: 3px; }
  .t::before { height: 3px; margin-top: -1.5px; }
  .structure, .route, .balance, .faq { padding: 70px 0; }
  .block { padding: 24px; }
  .b-blue { flex-direction: column; align-items: flex-start; }
  .step { padding: 28px 24px 32px; }
  .scale { padding: 26px 22px; }
  .scale-row { grid-template-columns: 1fr; gap: 8px; }
  .quote-band { padding: 60px 0; }
  .quote-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .q-arrow { width: 64px; height: 64px; }
  .faq-q { font-size: 1.02rem; padding: 18px; }
  .faq-a > p { padding: 0 18px; }
  .c-main { padding: 34px 24px; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .mini-grid .route { stroke-dashoffset: 0; }
}