/* Genoa website in the Genoa look: light only, serif headlines, square buttons with a ■ mark, navy as the main colour.
   Type is small and calm, like societies.ai: headlines up to 46px, section titles up to 32px, text 16px, labels 12 to 14px. */
:root {
  color-scheme: light;
  --bg: #ffffff; --porcelain: #f4f4f0; --ink: #1c1a16; --ink-2: #4d4a44; --muted: #77736b;
  --line: #e6e6e4; --line-strong: #d4d1cb; --navy: #22335a; --navy-hover: #3b4d7a;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: max(16px, 5vw);
  --ease: cubic-bezier(.6, 0, .2, 1);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased }
.in { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); max-width: 1800px; margin: 0 auto }
p { margin: 0 }
h1, h2, h3 { margin: 0; font-weight: 400 }
a { color: inherit }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px }

/* buttons: square, with a ■ mark */
.btn { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--sans); padding: 11px 14px; background: var(--navy); color: #fff; border: 0; border-radius: 0; text-decoration: none; cursor: pointer; transition: background .15s }
.btn::after { content: ""; width: 6px; height: 6px; background: currentColor }
.btn:hover { background: var(--navy-hover) }
.btn.white { background: #fff; color: var(--ink) }
.btn.white:hover { background: #e9e8e4 }
.btn:disabled { opacity: .6; cursor: default }
.link-sq { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; text-decoration: none }
.link-sq::after { content: ""; width: 8px; height: 8px; background: var(--ink) }
.link-sq:hover { opacity: .5 }

/* nav */
.nav .in { display: flex; justify-content: space-between; align-items: center; height: 60px }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; text-decoration: none }
.logo img { display: block }

/* hero: sky gradient, porcelain on the left and Genoa navy on the right (top to bottom on phones).
   It fills the first screen under the 60px bar, leaving the same 8px white edge at the bottom as at the sides. */
.hero { position: relative; margin-inline: max(8px, env(safe-area-inset-left, 0px)); min-height: max(560px, calc(100vh - 68px)); min-height: max(560px, calc(100svh - 68px)); overflow: hidden; display: flex; background: linear-gradient(90deg, #f4f4f0 30%, #22335a 70%) }
.hero canvas.sky { position: absolute; inset: 0; width: 100%; height: 100% }
.hero .content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; width: 100%; padding-block: clamp(88px, 20vh, 200px) 34px }
.hero h1 { font-family: var(--serif); font-size: clamp(34px, 3.1vw, 46px); line-height: 1.08; letter-spacing: -.01em; max-width: 6.8em; text-wrap: balance }
.hero .sub { font-size: 16px; line-height: 1.4; max-width: 26em; color: #1c1a16d9; text-wrap: pretty }
@media (max-width: 600px) { .hero .sub br { display: none } } /* one sentence per line on wide screens, running text on phones */
.hero .lead { display: flex; flex-direction: column; gap: 20px }
.team { display: flex; flex-direction: column; gap: 10px; color: #1c1a1699 }
.team span { font-size: 12px }
.marks { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline }
.marks b { font-size: 17px; font-weight: 600; letter-spacing: -.015em }
@media (max-width: 900px) { .hero { background: linear-gradient(180deg, #f4f4f0 40%, #22335a 90%) } .team { color: #ffffffb3 } }

/* headline comes in word by word */
.hero h1 .w { display: inline-block }
.hero h1.reveal .w { animation: wordIn .9s cubic-bezier(.2, .7, .2, 1) both }
@keyframes wordIn { from { opacity: 0; transform: translateY(.3em); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }

/* live map: your business in the middle, the agent's work around it (hidden on phones) */
.live { position: absolute; z-index: 2; inset: 0; pointer-events: none }
@media (max-width: 900px) { .live { display: none } }
.pt { position: absolute; width: 0; height: 0 }
.pt i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: #fff; transition: all .5s }
.pt.on i { left: -5px; top: -5px; width: 10px; height: 10px }
.pt.hub i { left: -6px; top: -6px; width: 12px; height: 12px }
.pt b { position: absolute; top: -10px; font-weight: 400; font-size: 14px; line-height: 20px; color: #fff; text-shadow: 0 1px 8px #0006; white-space: nowrap; opacity: 0; transition: opacity .45s }
.pt.r b { left: 16px }
.pt.l b { right: 16px }
.pt.hub b { left: 18px; font-weight: 500; opacity: 1 }
.pt.lab b { opacity: 1 }
.ln { position: absolute; height: 1px; margin-top: -.5px; background: #ffffffd9; transform-origin: 0 50%; transition: opacity .5s }
/* the white square the line reaches grows into a box with the message, then shrinks back into the square */
.lcard { position: absolute; width: 10px; height: 10px; overflow: hidden; background: #fff; color: var(--ink); opacity: 0; transition: width .8s var(--ease), height .8s var(--ease), box-shadow .6s, opacity .2s }
.lcard.show { opacity: 1 }
.lcard.open { box-shadow: 0 12px 32px -10px #00000059 }
.lcard .inner { position: absolute; top: 12px; left: 14px; width: 222px; opacity: 0; transition: opacity .4s }
.lcard.text .inner { opacity: 1 }
.lcard h3 { font-size: 14px; line-height: 20px; font-weight: 500 }
.lcard p { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-2) }
.lcard small { display: block; margin-top: 8px; font-size: 12px; color: var(--muted) }

/* section 2: lit list with one drawing per line */
.s2 { padding-block: 112px }
.s2 .intro { font-family: var(--serif); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; max-width: 20em; margin-bottom: 56px; text-wrap: balance }
.s2 .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center }
.items { display: flex; flex-direction: column; gap: 4px }
.items button { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #1c1a164d; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; transition: color .3s }
.items button[aria-selected="true"] { color: var(--ink) }
.items button:hover { color: #1c1a16b3 }
.explain { margin-top: 28px; font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 30em; min-height: 3em }
.frameWrap { position: relative; justify-self: center; width: min(100%, 320px); aspect-ratio: 4 / 5; background: var(--porcelain) }
.frameWrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s }
.frameWrap img.on { opacity: 1 }
.s2 .allExplain { display: none }
@media (max-width: 900px) {
  .s2 .grid { grid-template-columns: 1fr }
  .items button { color: var(--ink) }
  .explain { display: none }
  .s2 .allExplain { display: block; font-size: 15px; color: var(--ink-2); margin: 4px 0 16px }
  .frameWrap { width: min(100%, 260px) }
}

/* section 3: you decide / it never */
.s3 { position: relative; overflow: hidden; background: var(--porcelain); padding-block: 104px }
/* a faint engraved rosette, cut off by the right edge like a watermark (drawn in site.js) */
.s3 canvas.rosette { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.s3 > .in { position: relative }
.s3 h2 { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; text-wrap: balance; max-width: 18em }
.cando { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 48px }
.cando h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px }
.cando ul { list-style: none; margin: 0; padding: 0 }
.cando li { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; padding: 14px 0; border-top: 1px solid var(--line-strong); display: flex; gap: 16px; align-items: baseline }
.cando li:last-child { border-bottom: 1px solid var(--line-strong) }
.cando li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--navy); transform: translateY(-2px) }
.cando .never li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy) }
.cando-foot { margin-top: 32px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--ink-2) }
@media (max-width: 760px) { .cando { grid-template-columns: 1fr; gap: 36px } }

/* close: the hero's sky turned around, one statement and one button */
.close { position: relative; margin: 8px max(8px, env(safe-area-inset-left, 0px)) 0; overflow: hidden; color: #fff; background: #1c2a4b }
.close canvas.sky { position: absolute; inset: 0; width: 100%; height: 100% }
.close .in { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 128px 120px }
.close h2 { font-family: var(--serif); font-size: clamp(30px, 3.1vw, 46px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance }
@media (max-width: 480px) { .close h2 { font-size: min(30px, calc(7.3vw - 2px)) } } /* keeps "Banking shouldn’t be your job." on one line on phones */

/* footer */
footer .in { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-block: 28px 32px }
footer .small { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted) }
footer .small a { text-decoration: none }
footer .small a:hover { color: var(--ink) }

/* Book a demo page: the form on white, the sky beside it with your business as one white square */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh }
.book-side { display: flex; flex-direction: column; padding: 17px var(--gutter) 28px }
.book-top { display: flex; justify-content: space-between; align-items: center }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); text-decoration: none; transition: color .15s }
.back:hover { color: var(--ink) }
.book-body { margin-block: auto; width: 100%; max-width: 420px; padding-block: 64px }
.book h1 { font-family: var(--serif); font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.01em }
.book .lede { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 26em }
.book .step { display: flex; flex-direction: column }
.book .step[hidden] { display: none }
.book .mark { width: 10px; height: 10px; background: var(--navy); margin-bottom: 22px }
.book .step .link-sq { margin-top: 32px }
.book form { display: flex; flex-direction: column; gap: 26px; margin-top: 44px }
.book label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0 }
.book .opt { margin-left: 6px; color: #b3afa8 }
.book input { font: 16px var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 6px 0 9px; min-width: 0; width: 100%; transition: border-color .15s }
.book input::placeholder { color: #b3afa8 }
.book input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink) }
.book .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px }
.book form .btn { margin-top: 6px }
.book .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.book-foot { font-size: 13px; color: var(--muted) }
.book-foot a { text-decoration: none }
.book-foot a:hover { color: var(--ink) }
.book-sky { position: relative; margin: 8px 8px 8px 0; overflow: hidden; background: linear-gradient(90deg, #f4f4f0 20%, #22335a 75%) }
.book-sky canvas.sky { position: absolute; inset: 0; width: 100%; height: 100% }
.book-sky .you { left: 62%; top: 56% }
.book-sky .to { left: 84%; top: 28% }
.book-sky .ln { transform: scaleX(0); transition: transform 1.1s var(--ease) }
.book-sky .to i, .book-sky .to b { opacity: 0; transition: opacity .5s }
.book.sent .book-sky .to i { opacity: 1; transition-delay: .9s }
.book.sent .book-sky .to b { opacity: 1; transition-delay: 1.3s }
@media (prefers-reduced-motion: reduce) { .book-sky .ln, .book-sky .to i, .book-sky .to b { transition: none } }
@media (max-width: 900px) {
  .book { grid-template-columns: 1fr }
  .book-body { padding-block: 48px 40px }
  .book-sky { height: 168px; margin: 0 8px 8px }
  .book-sky .you { left: 52%; top: 62% }
  .book-sky .to { left: 82%; top: 30% }
}
@media (max-width: 480px) { .book .row2 { grid-template-columns: 1fr } }