/* Kingdom Vision. Royal Ink theme (approved Oct 26, 2026; logo A "Crown of Vision").
   Composition: one memorable moment (the crown drawing itself in the hero), one parchment page
   (the belief), everything else quiet ink with fine gold rules. No card grid, no tracked capitals:
   labels use Cormorant's own small capitals. */
:root {
  --ink: #16153A;        /* Royal Ink, the ground */
  --midnight: #100F2E;   /* deeper panels */
  --night: #211F4D;      /* the framed product */
  --gold: #E2C46A;       /* Crown Gold: marks, buttons */
  --rule: rgba(226, 196, 106, 0.32); /* fine gold rules on ink */
  --vellum: #F4EFE3;     /* the one parchment section */
  --deep-gold: #7A5A12;  /* gold text on vellum (5.9:1) */
  --on-ink: #F7F3EA;
  --on-ink-soft: #D5D1E3; /* body on ink (11:1) */
  --on-ink-quiet: #ABA6C4;/* small print on ink (6.7:1) */
  --on-vellum: #1F1D36;
  --on-vellum-soft: #48445F;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --caps: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Type scale (ratio ~1.25 from 17px). */
  --t-body: 1.0625rem;
  --t-lead: 1.25rem;
  --t-h3: 1.6rem;
  --t-h2: clamp(2.4rem, 4.6vw, 3.5rem);
  --t-h1: clamp(2.45rem, 7vw, 5.4rem);
  --gutter: clamp(20px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--on-ink); font: 400 var(--t-body)/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--gold); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: #F3DC92; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--ink); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--gold); color: var(--ink); padding: 12px 16px; font-weight: 600; }
.skip:focus { left: 16px; top: 16px; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: var(--gutter); }

/* Header: Kingdom Vision alone. */
.top { position: sticky; top: 0; z-index: 20; background: rgba(22, 21, 58, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--on-ink); text-decoration: none; }
.brand span { font-family: var(--caps); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.06em; line-height: 1; }
.links { display: flex; gap: 6px; }
.links a { font-family: var(--caps); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--on-ink-soft); text-decoration: none; padding: 10px 14px; border-radius: 8px; }
.links a:hover { color: var(--gold); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--on-ink); border-radius: 10px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--night); }
.menu-panel { position: absolute; right: 0; top: 54px; min-width: 210px; padding: 8px; background: var(--midnight); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 10px 22px rgba(5, 4, 20, 0.4); display: flex; flex-direction: column; }
.menu-panel a { font-family: var(--caps); font-weight: 600; font-size: 1.2rem; color: var(--on-ink); text-decoration: none; min-height: 48px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px; }
.menu-panel a:hover { background: rgba(226, 196, 106, 0.1); color: var(--gold); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 999px; font: 600 1rem/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #F0D88A; color: var(--ink); }
.btn-line { border: 1px solid rgba(247, 243, 234, 0.4); color: var(--on-ink); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }

/* Hero: the crest is the memorable thing. */
.hero { padding: clamp(72px, 11vw, 140px) 0 clamp(88px, 12vw, 150px); text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule), transparent); }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.crest { width: clamp(96px, 14vw, 150px); height: auto; overflow: visible; margin-bottom: 4px; }
.crest-crown, .crest-base { stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.crest-light { fill: var(--gold); }
.crest-glow { fill: var(--gold); opacity: 0.16; filter: blur(3px); }
h1 { font-family: var(--serif); font-weight: 600; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.012em; }
.lede { max-width: 36em; font-size: var(--t-lead); line-height: 1.6; color: var(--on-ink-soft); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }

/* One orchestrated moment: the crown draws in, the base follows, the point of light arrives. */
@media (prefers-reduced-motion: no-preference) {
  .crest-crown, .crest-base { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
  .crest-base { animation-delay: 0.9s; animation-duration: 0.7s; }
  .crest-light, .crest-glow { opacity: 0; transform-origin: 32px 34px; animation: light 0.9s ease-out 1.5s forwards; }
  .crest-glow { animation-name: glow; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes light { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes glow { from { opacity: 0; transform: scale(0.4); } to { opacity: 0.16; transform: scale(1); } }

/* Sections share one rhythm. */
.belief, .work, .founders, .contact { padding: clamp(80px, 10vw, 128px) 0; }
section[id] { scroll-margin-top: 72px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.005em; text-wrap: balance; }
.section-title { margin-bottom: clamp(32px, 5vw, 56px); }

/* The belief: the one parchment page. */
.belief { background: var(--vellum); color: var(--on-vellum); }
.belief-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.belief h2 { font-style: italic; font-weight: 500; font-size: clamp(2.5rem, 5vw, 3.9rem); }
.story { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.5rem); line-height: 1.6; color: var(--on-vellum-soft); display: flex; flex-direction: column; gap: 1em; max-width: 34em; }
.story em { color: var(--on-vellum); }
.values { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(56px, 8vw, 96px); }
.values::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(122, 90, 18, 0.35); }
.values li { padding: 28px 32px 0 0; }
.values li + li { padding-left: 32px; border-left: 1px solid rgba(122, 90, 18, 0.25); }
.values h3 { font-family: var(--caps); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.03em; color: var(--deep-gold); margin-bottom: 10px; }
.values p { color: var(--on-vellum-soft); max-width: 30em; }

/* Our first work: framed like a painting. */
.product { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); align-items: center; background: var(--night); border-radius: 6px; padding: clamp(28px, 5vw, 64px); }
.product::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--rule); border-radius: 2px; pointer-events: none; }
.product-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.product-logo { line-height: 0; }
.product-logo img { width: 190px; height: auto; }
.product-lede { font-size: 1.125rem; line-height: 1.65; color: var(--on-ink-soft); max-width: 32em; }
.ticks { display: flex; flex-direction: column; gap: 8px; color: var(--on-ink); }
.ticks li { display: flex; gap: 12px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 6px; height: 6px; transform: translateY(-2px) rotate(45deg); background: var(--gold); }
.product-visual { position: relative; display: block; padding-bottom: 140px; border-radius: 4px; }
.product-photo { width: 80%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--midnight); }
.product-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; transition: transform 0.6s ease; }
.product-visual:hover .product-photo img { transform: scale(1.03); }
.phones { position: absolute; right: 0; bottom: 0; width: 50%; display: flex; gap: 12px; align-items: flex-end; }
.phone { flex: 1 1 0; min-width: 0; display: block; border: 5px solid #0B0A22; border-radius: 24px; overflow: hidden; background: #0B0A22; box-shadow: 0 22px 44px rgba(5, 4, 20, 0.5); }
.phone:first-child { margin-bottom: 30px; }
.phone img { width: 100%; height: auto; }
.more { margin-top: 28px; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--on-ink-quiet); }

/* Founders: seals, not cards. */
.founders { background: var(--midnight); }
.founder-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); }
.founder-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 24px; align-items: start; }
.seal { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--gold); box-shadow: inset 0 0 0 5px var(--midnight), inset 0 0 0 6px var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--caps); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.04em; color: var(--gold); }
.founder-list h3 { font-family: var(--serif); font-weight: 600; font-size: 1.9rem; line-height: 1.1; }
.role { font-family: var(--caps); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.03em; color: var(--gold); margin: 4px 0 12px; }
.founder-list p:not(.role) { color: var(--on-ink-soft); max-width: 32em; }

/* Closing */
.contact { text-align: center; }
.contact-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.contact-mark { width: 44px; height: 44px; opacity: 0.9; }
.contact p { max-width: 32em; font-size: var(--t-lead); color: var(--on-ink-soft); text-wrap: pretty; }

.foot { border-top: 1px solid var(--rule); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; min-height: 88px; padding-block: 20px; font-size: 0.9rem; color: var(--on-ink-quiet); }
.foot-brand, .foot-work { display: flex; align-items: center; gap: 12px; }
.foot-work span { font-family: var(--caps); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; }
.foot-work a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--on-ink); text-decoration: none; font-weight: 600; }
.foot-work a:hover { color: var(--gold); }
.foot-work img { height: 22px; width: auto; }

/* Tablet */
@media (max-width: 900px) {
  .belief-grid, .product { grid-template-columns: minmax(0, 1fr); }
  .values { grid-template-columns: minmax(0, 1fr); }
  .values::before { display: none; }
  .values li, .values li + li { padding: 24px 0; border-left: 0; border-top: 1px solid rgba(122, 90, 18, 0.3); }
  .founder-list { grid-template-columns: minmax(0, 1fr); }
}

/* Phone */
@media (max-width: 680px) {
  .nav { min-height: 64px; }
  .links { display: none; }
  .menu { display: block; }
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: 1.25rem; }
  .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .product { padding: 36px 26px; }
  .product::before { inset: 10px; }
  .product-visual { padding-bottom: 0; display: flex; flex-direction: column; gap: 16px; }
  .product-photo { width: 100%; }
  .phones { position: static; width: 100%; padding: 0 8%; }
  .phone:first-child { margin-bottom: 0; }
  .founder-list li { grid-template-columns: 60px minmax(0, 1fr); gap: 18px; }
  .seal { width: 60px; height: 60px; font-size: 1.25rem; }
  .foot-row { flex-direction: column; align-items: flex-start; justify-content: center; }
}

/* ------------------------------------------------------------------------------------------------
   Light theme (the default): alabaster ground, royal-ink accents, gold only for the crest's point of
   light, the rules and small labels. Dark (above) applies when the visitor's device is set to dark.
   Chosen by the founders Oct 26, 2026: both, following the device.
   ------------------------------------------------------------------------------------------------ */
.brand picture, .contact-inner picture { display: contents; }
@media not all and (prefers-color-scheme: dark) {
  :root {
    --alabaster: #F8F6F1;
    --parchment: #EFE9DD;
    --ink: #16153A;
    --ink-soft: #3D3A5C;    /* body on light (10:1) */
    --ink-quiet: #5E5A78;   /* small print on light (6.2:1) */
    --deep-gold: #7A5A12;   /* gold text on light (6.2:1) */
    --rule-light: rgba(122, 90, 18, 0.35);
  }
  body { background: var(--alabaster); color: var(--ink); }
  a { color: var(--deep-gold); }
  a:hover { color: #5C430C; }
  :focus-visible { outline-color: var(--ink); }
  ::selection { background: var(--ink); color: var(--alabaster); }

  /* Header: light glass, ink type. */
  .top { background: rgba(248, 246, 241, 0.92); border-bottom-color: var(--rule-light); }
  .brand { color: var(--ink); }
  .links a { color: var(--ink-soft); }
  .links a:hover { color: var(--deep-gold); }
  .menu summary { color: var(--ink); }
  .menu[open] summary { background: var(--parchment); }
  .menu-panel { background: #FFFFFF; border-color: var(--rule-light); box-shadow: 0 10px 22px rgba(22, 21, 58, 0.12); }
  .menu-panel a { color: var(--ink); }
  .menu-panel a:hover { background: var(--parchment); color: var(--ink); }

  /* Buttons: ink is the primary accent. */
  .btn-gold { background: var(--ink); color: var(--alabaster); }
  .btn-gold:hover { background: #26245A; color: #FFFFFF; }
  .btn-line { border-color: rgba(22, 21, 58, 0.35); color: var(--ink); }
  .btn-line:hover { border-color: var(--ink); color: var(--ink); }

  /* Hero: crown in ink, the light in gold. */
  .hero::before { background: linear-gradient(90deg, transparent, var(--rule-light), transparent); }
  .crest-crown, .crest-base { stroke: var(--ink); }
  .crest-light { fill: #C9A23C; }
  .crest-glow { fill: #E2C46A; opacity: 0.35; }
  @keyframes glow { from { opacity: 0; transform: scale(0.4); } to { opacity: 0.35; transform: scale(1); } }
  .lede { color: var(--ink-soft); }

  /* Belief: the deeper parchment page. */
  .belief { background: var(--parchment); }

  /* Our first work: the one dark panel, framed. */
  .work { background: var(--alabaster); }
  .product { background: var(--ink); color: #F7F3EA; }
  .product::before { border-color: rgba(226, 196, 106, 0.32); }
  .product .btn-gold { background: #E2C46A; color: var(--ink); }
  .product .btn-gold:hover { background: #F0D88A; color: var(--ink); }
  .more { color: var(--ink-quiet); }

  /* Founders: light, with ink seals. */
  .founders { background: var(--alabaster); border-top: 1px solid var(--rule-light); }
  .seal { border-color: var(--ink); box-shadow: inset 0 0 0 5px var(--alabaster), inset 0 0 0 6px var(--rule-light); color: var(--ink); }
  .founder-list h3 { color: var(--ink); }
  .role { color: var(--deep-gold); }
  .founder-list p:not(.role) { color: var(--ink-soft); }

  /* Closing on parchment, then an ink footer as the base accent. */
  .contact { background: var(--parchment); }
  .contact p { color: var(--ink-soft); }
  .foot { background: var(--ink); border-top: 0; color: #ABA6C4; }
  .foot-work a { color: #F7F3EA; }
  .foot-work a:hover { color: #E2C46A; }
}