/* Digital business card (card.html): the element tile, its orbits, and the save → explore → enquire steps. */
.card-page {
  min-height: 100vh; min-height: 100svh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(42,163,156,.22), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(227,163,54,.10), transparent 60%),
    var(--ink);
  color: #fff;
}
.card-shell { overflow-x: clip; }   /* full-width: the orbit canvas may overhang the column but never widens the page */
.card-wrap {
  width: min(1080px, 100% - 32px); margin-inline: auto;
  padding: max(28px, env(safe-area-inset-top)) 0 max(32px, env(safe-area-inset-bottom));
  display: grid; gap: 28px; align-items: center;
}
@media (min-width: 900px) {
  .card-wrap { grid-template-columns: 1fr 1fr; gap: 56px; min-height: 100vh; min-height: 100svh; }
}

/* ---------------- scene + tile ---------------- */
.scene { position: relative; display: grid; place-items: center; padding: 40px 0; perspective: 1200px; }
.scene-canvas { position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; transform: translate(-50%, -50%); pointer-events: none; }

.tile {
  --w: min(320px, 100vw - 72px);
  --u: calc(var(--w) / 100);
  position: relative; width: var(--w); aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .6s ease, filter .8s ease;
}
.js .tile:not(.is-in) { opacity: 0; transform: scale(.82); filter: blur(10px); }
.tile-inner {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: absolute; inset: 0; display: block;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3,1.3,.4,1);
}
.tile-inner:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 22px; }
.tile.is-flipped .tile-inner { transform: rotateY(180deg); }

.face {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1.5px solid rgba(227,163,54,.55);
  background:
    linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%),
    linear-gradient(160deg, #15445b, #0b2a3a 70%);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 6px rgba(227,163,54,.06), inset 0 1px 0 rgba(255,255,255,.12);
}
.face::before {                        /* faint hexagon lattice, the same motif as the logo */
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 42 72.75'%3E%3Cpath d='M21 0 42 12.12v24.25L21 48.5 0 36.37V12.12Zm0 48.5v24.25' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 28px auto;
}
.face::after {                         /* sheen that follows the tilt */
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.14), transparent);
  transform: translate(calc(var(--mx, 0) * 30%), calc(var(--my, 0) * 30%));
  transition: transform .2s;
}

/* Everything inside the tile is sized in --u (1% of the tile's width, set on .tile), so text,
   logo and spacing scale together; text has a readable floor so it never gets tiny.
   (Plain calc() on purpose: container-query units broke in some browsers.) */

/* front: small logo, big two-line name, a gold rule and one line about what we do */
.face-front { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(9 * var(--u)) calc(8 * var(--u)) calc(5 * var(--u)); }
.el-sym { display: block; margin-top: auto; filter: drop-shadow(0 6px 16px rgba(227,163,54,.22)); }
.el-sym svg { width: calc(19 * var(--u)); height: auto; }
.el-name { display: grid; margin-top: calc(6 * var(--u)); font: 600 max(27px, calc(12 * var(--u)))/1.02 var(--font-display); letter-spacing: -.01em; color: #fff; }
.el-name-2 {
  background: linear-gradient(170deg, #ffd88a 10%, var(--gold) 50%, var(--gold-deep) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.el-rule { width: calc(12 * var(--u)); height: 2px; margin: calc(6 * var(--u)) 0 calc(5 * var(--u)); border-radius: 2px; background: var(--gold); opacity: .8; }
.el-intro { max-width: calc(72 * var(--u)); margin-bottom: auto; font-size: max(12.5px, calc(4.6 * var(--u))); line-height: 1.45; color: #cfe7e5; }
.flip-hint {
  display: flex; justify-content: center; align-items: center; gap: calc(1.8 * var(--u)); padding-top: calc(3 * var(--u)); flex: none;
  font-size: max(10px, calc(3.1 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.flip-hint svg { width: 1.3em; height: 1.3em; }

/* back */
.face-back { transform: rotateY(180deg); padding: calc(6.5 * var(--u)) calc(6.5 * var(--u)) calc(5 * var(--u)); display: flex; flex-direction: column; gap: calc(4.5 * var(--u)); }
.back-head { display: flex; align-items: center; gap: calc(3.5 * var(--u)); padding-bottom: calc(3.5 * var(--u)); border-bottom: 1px solid rgba(255,255,255,.12); }
.back-mark { flex: none; }
.back-mark svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.back-name { display: block; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: max(11px, calc(4 * var(--u))); }
.back-sub { display: block; font-size: max(10px, calc(3 * var(--u))); color: #9fd6d2; margin-top: calc(.6 * var(--u)); line-height: 1.35; }
.back-rows { display: grid; gap: calc(3.6 * var(--u)); }
.back-row { display: grid; font-size: max(12.5px, calc(5 * var(--u))); font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.back-row i { font-style: normal; font-size: max(9px, calc(3 * var(--u))); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: calc(.5 * var(--u)); }
.face-back .flip-hint { margin-top: auto; }

/* ---------------- personalised links (card.html?for=…&sector=…) ---------------- */
.for-badge {
  position: relative; z-index: 1; margin: -12px 0 22px; padding: 7px 16px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.75);
  background: rgba(227,163,54,.1); border: 1px solid rgba(227,163,54,.4); text-align: center; max-width: 100%;
}
.for-badge b { color: var(--gold); font-weight: 800; }
.journey-hello { margin: 0 0 2px; text-align: center; font-size: .95rem; color: #9fd6d2; font-weight: 600; }
.journey-hello b { color: #fff; }
.picks-label { margin: 0 0 8px !important; font-size: .7rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold) !important; }
.pick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.pick-list a {
  display: block; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--c); line-height: 1.25; transition: background .2s;
}
.pick-list a:hover { background: rgba(255,255,255,.12); }
.pick-list b { display: block; font-size: .86rem; }
.pick-list small { display: block; font-size: .7rem; color: rgba(255,255,255,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .journey-hello { text-align: left; } }

/* ---------------- journey ---------------- */
.journey { width: min(460px, 100%); margin-inline: auto; min-width: 0; }
.step-body { min-width: 0; }
.journey-intro { text-align: center; font: 600 1.35rem/1.3 var(--font-display); margin-bottom: 18px; }
@media (min-width: 900px) { .journey-intro { text-align: left; } }
.js .journey { opacity: 0; transform: translateY(16px); transition: opacity .7s ease .2s, transform .7s ease .2s; }
.js .journey.is-in { opacity: 1; transform: none; }

.steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.step {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  transition: border-color .4s, background .4s, opacity .4s;
}
.step h2 { font: 700 1.02rem/1.3 var(--font-body); color: #fff; letter-spacing: 0; }
.step p { font-size: .88rem; color: rgba(255,255,255,.66); margin: 4px 0 14px; }
.step-num {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.25); font-weight: 800; font-size: .95rem;
  transition: background .4s, border-color .4s, color .4s;
}
.step-num svg { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the step to do next is lit; finished steps get a tick; later steps stay quiet but usable */
.step.is-current { border-color: rgba(227,163,54,.6); background: rgba(227,163,54,.07); box-shadow: 0 0 0 4px rgba(227,163,54,.06); }
.step.is-current .step-num { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.step.is-done .step-num { background: var(--teal); border-color: var(--teal); color: #fff; }
.step.is-done .step-num b { display: none; }
.step.is-done .step-num svg { display: block; }
.step:not(.is-current) .step-body > p { margin-bottom: 12px; }
.step:not(.is-current):not(.is-done) { opacity: .82; }

.card-page .btn { padding: 13px 20px; }
.card-page .btn svg { flex: none; }
.btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-line:hover { background: rgba(255,255,255,.08); border-color: #fff; box-shadow: none; }
.step:not(.is-current) .btn:not(.btn-line) { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.step:not(.is-current) .btn-wa { border-color: rgba(37,211,102,.6); }
.card-page .btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.card-page .btn-wa:hover { background: var(--wa-deep); border-color: var(--wa-deep); box-shadow: 0 8px 20px rgba(37,211,102,.3); }
.step.is-current .btn-line { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.families { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.families a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  transition: background .2s, border-color .2s;
}
.families a:hover { background: rgba(255,255,255,.12); border-color: var(--c); }
.families i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.alt-actions { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.alt-actions a { flex: 1; white-space: nowrap; text-align: center; padding: 9px 6px; border-radius: 10px; font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.8); background: rgba(255,255,255,.05); }
.alt-actions a:hover { background: rgba(255,255,255,.1); color: #fff; }

.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font: 600 .88rem/1 var(--font-body); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
}
.share-btn:hover { background: rgba(255,255,255,.14); }
.site-link { font-size: .88rem; font-weight: 600; color: #9fd6d2; }
.site-link:hover { color: #fff; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 10;
  padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .88rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: opacity .3s, transform .3s; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .step { grid-template-columns: 28px 1fr; gap: 10px; padding: 16px 14px; }
  .step-num { width: 28px; height: 28px; font-size: .82rem; }
  .families { gap: 6px; }
  .families a { font-size: .74rem; padding: 5px 9px; gap: 6px; }
  .alt-actions a { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile-inner, .journey { transition: none !important; }
}

/* ---------------- card link maker (card-link.html) ---------------- */
.maker { width: min(560px, 100% - 32px); margin-inline: auto; padding: max(28px, env(safe-area-inset-top)) 0 40px; }
.maker-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.maker-mark { flex: none; }
.maker-mark svg { width: 48px; height: 48px; }
.maker-head h1 { font-size: clamp(1.4rem, 5vw, 1.8rem); color: #fff; margin-bottom: 6px; }
.maker-head p { font-size: .9rem; color: rgba(255,255,255,.66); margin: 0; }
.maker-form { display: grid; gap: 14px; }
.maker-form label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.maker-form label span { font-weight: 500; font-size: .76rem; color: rgba(255,255,255,.5); }
.maker-form input, .maker-form select, .maker-form textarea {
  font: 500 1rem/1.4 var(--font-body); color: #fff; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); width: 100%;
}
.maker-form select option { color: var(--ink); }
.maker-form input:focus, .maker-form select:focus, .maker-form textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.09); }
.maker-form textarea { font-size: .9rem; resize: vertical; }
.maker-out { margin-top: 6px; padding: 16px; border-radius: 16px; border: 1px solid rgba(227,163,54,.45); background: rgba(227,163,54,.06); display: grid; gap: 8px; }
.maker-out .picks-label { margin: 4px 0 0 !important; }
.maker-link { display: block; font: 600 .86rem/1.45 ui-monospace, Menlo, monospace; color: #9fd6d2; word-break: break-all; user-select: all; }
.maker-link.is-empty { color: rgba(255,255,255,.4); font-family: var(--font-body); user-select: none; }
.maker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.maker-actions .btn-wa { grid-column: 1 / -1; }
.maker-actions .btn.is-disabled { opacity: .45; }
.maker-note { margin-top: 18px; font-size: .78rem; color: rgba(255,255,255,.45); text-align: center; }

/* PIN gate */
.pin-gate { display: none; }
.maker-page.is-locked .pin-gate {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  width: min(340px, 100% - 32px); margin: 0 auto; padding: 18vh 0 40px;
}
.maker-page.is-locked .maker { display: none; }
.pin-gate h1 { color: #fff; font-size: 1.6rem; }
.pin-gate p { margin: 0; color: rgba(255,255,255,.66); font-size: .9rem; }
.pin-gate input {
  width: 100%; text-align: center; font: 700 1.6rem/1 var(--font-body); letter-spacing: .5em; padding: 14px 0 14px .5em;
  color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
}
.pin-gate input:focus { outline: none; border-color: var(--gold); }
.pin-gate .pin-error { color: #ff9d8a; font-weight: 600; }
.pin-back { margin-top: 8px; font-size: .85rem; color: #9fd6d2; }