/* Karneeti homepage hero — artwork + floating module cards.
   Extracted from demo/hero-preview.html once the design settled. */

/* ============================================================
   HERO — the artwork sits at its natural ratio, so image
   coordinates map linearly to the page. The dashboard is LIVE
   HTML projected onto the wall screen, not baked into the
   picture, so the module names stay sharp at any size.
   ============================================================ */
.vhero { position: relative; background: var(--cream); overflow: hidden;
  padding: 0; margin: 0; }   /* the global section padding was pushing the artwork below the nav */
.vhero-art { position: relative; width: 100%; line-height: 0; overflow: hidden; }
.vhero-art img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }

.screen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }  /* above the cream veil */


/* ---------- floating glass cards ----------
   Each sits at a % of the hero and drifts on its own offset, so they read
   as elements in the room rather than one slab pasted over it. */
.fc {
  position: absolute; left: 0; top: 0; width: 22%;
  transform: translate(-50%, -50%);
  border-radius: 1.25em; padding: 1.15em 1.25em 1.05em;
  display: flex; flex-direction: column; gap: .55em;
  overflow: hidden; isolation: isolate;
  /* layered glass: tinted base, blur, a lit top edge and a coloured lift */
  background:
    linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,251,243,.52)),
    rgba(255,253,248,.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 2.2em 4.2em -1.2em rgba(22,38,79,.34),
    0 .5em 1.2em -.4em rgba(22,38,79,.14),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35);
  opacity: 0; animation: fc-in .75s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: var(--in, 0s);
}
/* a soft wash of the module's colour, low in the card */
.fc::after {
  content: ''; position: absolute; inset: auto -30% -60% -30%; height: 100%;
  background: radial-gradient(60% 100% at 50% 100%, var(--accent, #C8A03C), transparent 70%);
  opacity: .1; z-index: -1; pointer-events: none;
}
.fc::before { content: ''; position: absolute; inset: 0 0 auto; height: .18em;
  background: linear-gradient(90deg, var(--accent, #C8A03C), transparent 78%); }

.fc-rev   { --accent: #2E8B57; }
.fc-out   { --accent: #D2551E; }
.fc-lead  { --accent: #C8A03C; }
.fc-work  { --accent: #E8652B; }
.fc-voice { --accent: #1F7C78; }
.fc-comp  { --accent: #1B2F63; }

.fc:nth-of-type(1) { --in: .25s; --d: 0s }
.fc:nth-of-type(2) { --in: .40s; --d: -1.4s }
.fc:nth-of-type(3) { --in: .55s; --d: -2.8s }
.fc:nth-of-type(4) { --in: .70s; --d: -4.2s }
.fc:nth-of-type(5) { --in: .85s; --d: -5.6s }
.fc:nth-of-type(6) { --in: 1.0s; --d: -7.0s }
@keyframes fc-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 22px)) scale(.97); }
                   to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.screen.floating .fc { opacity: 1; animation: fc-drift 9s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes fc-drift {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - .9em)); }
}
@media (prefers-reduced-motion: reduce) {
  .fc { opacity: 1; animation: none; transform: translate(-50%, -50%); }
  .screen.floating .fc { animation: none; }
}

/* ---- headline metric ---- */
.fc .fk { font-size: .72em; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); }
.fc .fv { display: flex; align-items: baseline; gap: .5em; flex-wrap: nowrap; line-height: 1.1;
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2.05em;
  color: #14224A; line-height: 1; letter-spacing: -.025em; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
/* the trend reads as a pill, not loose text */
.fc .fv em { font-style: normal; font-family: 'DM Sans', sans-serif; font-size: .42em;
  font-weight: 800; letter-spacing: .01em; padding: .34em .7em; border-radius: 99px;
  background: rgba(46,139,87,.14); color: #1E6B44; transform: translateY(-.15em); }
.fc .fm { font-size: .8em; font-weight: 500; color: #6E7590; }
.fc svg { width: 100%; height: 2.6em; display: block; overflow: visible; }

/* ---- module header ---- */
.fc .fh { display: flex; align-items: center; gap: .6em; }
.fc .fh b { font-size: 1.05em; font-weight: 800; color: #14224A; letter-spacing: -.015em; }
.fc .fi { width: 2.05em; height: 2.05em; border-radius: .62em; display: flex;
  align-items: center; justify-content: center; flex: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, #fff),
                                      color-mix(in srgb, var(--accent) 9%, #fff));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 .25em .6em -.2em color-mix(in srgb, var(--accent) 40%, transparent); }
.fc .fi svg { width: 1.05em; height: 1.05em; fill: none; stroke-width: 2.2; stroke: var(--accent); }

/* ---- rows ---- */
.fc .fr { list-style: none; margin: .1em 0 0; padding: 0; display: flex; flex-direction: column; gap: .3em; }
.fc .fr li { display: flex; align-items: center; gap: .5em; font-size: .85em; font-weight: 500;
  color: #3E465F; padding: .38em .5em; border-radius: .45em;
  background: rgba(255,255,255,.42); }
.fc .fr li:nth-child(even) { background: rgba(255,255,255,.2); }
.fc .chip { margin-left: auto; font-size: .68em; font-weight: 800; letter-spacing: .01em;
  padding: .26em .68em; border-radius: 99px; white-space: nowrap; }
.fc .chip.done { background: rgba(46,139,87,.16);  color: #1E6B44; }
.fc .chip.prog { background: rgba(200,160,60,.26); color: #7A5D0A; }
.fc .chip.due  { background: rgba(232,101,43,.18); color: #B8440F; }

.fc .lead .p { width: 1.45em; height: 1.45em; border-radius: 50%; font-size: .68em; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: rgba(200,160,60,.22); color: #8A6A12; }
.fc .lead .p.first { background: linear-gradient(150deg,#DCB44E,#B8912F); color: #fff;
  box-shadow: 0 .2em .5em -.1em rgba(184,145,47,.6); }
.fc .lead b { margin-left: auto; color: #14224A; font-size: .95em; font-variant-numeric: tabular-nums; }

/* ---- ageing bars ---- */
.fc .age { display: flex; align-items: flex-end; gap: .45em; height: 3em; margin-top: .35em; }
.fc .age span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; gap: .25em; }
.fc .age i { display: block; width: 100%; border-radius: .3em .3em .12em .12em;
  background: linear-gradient(180deg,#F09A5E,#D2551E);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.fc .age b { font-size: .58em; font-weight: 700; color: #6E7590; letter-spacing: .02em; }

/* ---- two metrics in one card ---- */
.fc .duo { display: flex; flex-direction: column; gap: .75em; }
.fc .duo > div + div { padding-top: .75em; border-top: 1px solid rgba(27,47,99,.1); }
.fc .duo > div { display: flex; flex-direction: column; gap: .22em; }
.fc .fk.alt { color: #D2551E; }
.fc .fv.small { font-size: 1.35em; }
.fc .fv em.up { background: rgba(46,139,87,.15); color: #1E6B44; }

/* ---- four operations figures ---- */
.fc .quad { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; margin-top: .2em; }
.fc .quad span { display: flex; flex-direction: column; gap: .28em;
  background: rgba(255,255,255,.55); border-radius: .55em; padding: .65em .75em .6em; }
.fc .quad b { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.85em;
  color: #14224A; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fc .quad u { text-decoration: none; font-size: .76em; font-weight: 700; line-height: 1.25;
  color: #7A8098; letter-spacing: .015em; }
.fc .quad b i { font-style: normal; font-family: 'DM Sans', sans-serif; font-size: .48em;
  font-weight: 700; color: #8A90A6; margin-left: .15em; }

/* ---- the Voice card sits forward of the rest ---- */
.fc-voice {
  z-index: 4;
  background:
    linear-gradient(150deg, rgba(255,255,255,.82), rgba(240,252,251,.62)),
    rgba(255,253,248,.5);
  border-color: rgba(255,255,255,.95);
  box-shadow:
    0 3em 5.5em -1.2em rgba(22,38,79,.42),
    0 .6em 1.4em -.4em rgba(31,124,120,.28),
    inset 0 1px 0 rgba(255,255,255,.98);
}
.fc-voice::after { opacity: .16; }
.fc .live { margin-left: auto; font-size: .62em; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #1F7C78; background: rgba(31,124,120,.14);
  padding: .3em .7em; border-radius: 99px; display: inline-flex; align-items: center; gap: .45em; }
.fc .live::before { content: ''; width: .5em; height: .5em; border-radius: 50%;
  background: #1F7C78; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.8) } }
@media (prefers-reduced-motion: reduce) { .fc .live::before { animation: none } }

/* ---- voice waveform ---- */
.fc .wv { display: flex; align-items: center; gap: .24em; height: 2.1em; }
.fc .wv i { flex: 1; border-radius: .18em; height: var(--h);
  background: linear-gradient(180deg,#2A9A95,#1F7C78);
  animation: wv 1.5s ease-in-out infinite alternate; }
.fc .wv i:nth-child(2n) { animation-delay: -.4s } .fc .wv i:nth-child(3n) { animation-delay: -.8s }
@keyframes wv { from { transform: scaleY(.5) } to { transform: scaleY(1) } }
@media (prefers-reduced-motion: reduce) { .fc .wv i { animation: none } }

/* ---------- copy ---------- */
.vhero-copy { position: absolute; z-index: 3; }
.vhero-eyebrow { display: block; font-size: .64rem; font-weight: 800; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--saffron-deep); margin-bottom: .8rem; }
.vhero h1 { font-family: 'Playfair Display', serif; font-weight: 900; color: var(--text-dark);
  line-height: 1.06; letter-spacing: -1px; margin: 0; }
.vhero h1 .lead { display: block; font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: clamp(.92rem, 3.4vw, 1.1rem); color: var(--text-mid); margin-bottom: .3rem; }
.vhero h1 .tw { display: inline-block; text-align: left;
  background: linear-gradient(135deg, var(--saffron) 10%, var(--gold) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vhero .rule { width: 66px; height: 2px; margin: .9rem 0 .8rem;
  background: linear-gradient(90deg, var(--gold), transparent); }
.vhero-sub { color: var(--text-mid); line-height: 1.6; }
.vhero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2rem; }
.vhero-ctas a { text-decoration: none; font-weight: 700; font-size: .9rem; padding: 12px 20px; border-radius: 999px; }
.vhero-ctas .p { background: var(--royal); color: #fff; }
.vhero-ctas .g { background: rgba(255,255,255,.78); color: var(--text-dark); border: 1px solid var(--border-mid); }
.vhero-trust { margin-top: 1.3rem; }
.vhero-trust .k { display: block; font-size: .64rem; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--text-mid); margin-bottom: .6rem; }
.vhero-trust .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vhero-trust img[width][height] { height: 24px; width: auto; opacity: .6; filter: grayscale(1); }
.vhero-trust .badge { font-size: .76rem; font-weight: 700; color: var(--text-mid); }

.site-header.over { position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 0; box-shadow: none; backdrop-filter: none; }
.site-header.over .nav-links a { color: var(--text-dark); }
.site-header.over .nav-links a.nav-cta { color: #fff; }
.site-header.over .nav-toggle { color: var(--text-dark); }

@media (max-width: 899px) {
  .vhero-art { height: 126svh; }
  .vhero-art img[width][height] {
    position: absolute; top: 0; left: -60%;
    width: 162%; max-width: none;   /* the global CLS guard caps this at 100% */
    height: auto; object-fit: fill; }   /* 'none' showed a crop at intrinsic size, not the scaled picture */
  .vhero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(180deg, rgba(250,246,236,.5) 0%, rgba(250,246,236,0) 7%,
                rgba(250,246,236,0) 28%, rgba(250,246,236,.45) 34%,
                rgba(250,246,236,.88) 38%, var(--cream) 42%); }
  .vhero-copy { left: 0; right: 0; top: 58%; padding: 1.1rem 1.4rem 1.4rem; }
  .fc .fv { font-size: 1.7em; }
  .fc .duo { gap: .6em; }
  .fc .duo > div + div { padding-top: .6em; }
  .fc .fr { gap: .22em; }
  .fc .fr li { padding: .3em .45em; }
  .fc .quad { gap: .4em; }
  .fc .quad span { padding: .45em .55em .4em; }
  .vhero-copy::before { content: ''; position: absolute; inset: -.4rem .6rem -.6rem .6rem; z-index: -1;
    background: radial-gradient(120% 100% at 20% 50%, rgba(250,246,236,.94), rgba(250,246,236,.72) 55%,
                rgba(250,246,236,0) 100%);
    filter: blur(2px); border-radius: 1.4rem; }
  .vhero h1 { font-size: clamp(1.75rem, 8.2vw, 2.6rem); }
  .vhero-sub { font-size: .95rem; max-width: 30ch; }

  /* There is only room for one card between the faces and the copy, so they
     take turns instead of competing for space. */
  .screen .fc, .screen.floating .fc { opacity: 0 !important; animation: none !important;
        transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
        transform: translate(-50%, calc(-50% + 14px)); }
  .screen .fc.show, .screen.floating .fc.show { opacity: 1 !important;
        transform: translate(-50%, -50%); }

}
@media (min-width: 900px) {
  /* landscape art is 3:2 — cap at 86vh so the team at the desks stays visible */
  .vhero-art { height: 100svh; }
  .vhero-art img[width][height] { object-position: 100% 50%; }
  .vhero-copy { left: 0; top: 50%; transform: translateY(-50%); width: 47%;
    padding-left: max(2.5rem, calc((100vw - 1280px) / 2 + 2.5rem)); padding-right: 2rem; }
  .vhero h1 { font-size: clamp(2.4rem, 4.2vw, 3.7rem); }
  .vhero-sub { font-size: 1.02rem; max-width: 30ch; }
  /* feather the artwork under the nav and behind the copy */
  .vhero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
      linear-gradient(180deg, rgba(250,246,236,.7) 0%, rgba(250,246,236,0) 12%),
      linear-gradient(90deg, var(--cream) 30%, rgba(250,246,236,.8) 42%, rgba(250,246,236,0) 56%); }
}

/* the hero dashboard carries invented numbers — say so, quietly but plainly */
.art-note {
  position: absolute; right: 1rem; bottom: .85rem; z-index: 4;
  font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  color: var(--text-light); background: rgba(255,253,248,.72);
  padding: .3rem .7rem; border-radius: 99px;
  border: 1px solid rgba(27,47,99,.08); backdrop-filter: blur(6px);
}
@media (max-width: 899px) { .art-note { right: .8rem; bottom: auto; top: 42%; font-size: .6rem; } }