/* Fonts allotjades a la mateixa web (sense peticions a Google) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }


/* Layout: one night-sea scene that continues down the page; the lighthouse is the hero and the light is the interaction. Single dark theme by choice. */
:root {
  --night: #0b1d2b;
  --night-2: #12303c;
  --sea: #1d4a52;
  --cream: #f6e7c1;
  --gold: #f2c66d;
  --terra: #c9785f;
  --mist: #a9bfc0;
  --line: rgba(246, 231, 193, .16);
  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --sweep: 9s;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  height: 760px;
  overflow: hidden;
  background: linear-gradient(180deg, #081723 0%, #0e2433 45%, #173e48 100%);
  transition: filter 1.2s ease;
}
.hero.off { filter: brightness(.82) saturate(.9); }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }

nav {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 1.6rem 24px 0;
}
.brand { font-family: var(--display); font-size: 1.5rem; font-weight: 500; text-decoration: none; letter-spacing: .01em; }
.links { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.links a { text-decoration: none; opacity: .75; transition: opacity .2s; }
.links a:hover { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid rgba(246, 231, 193, .35); border-radius: 50%; background: rgba(11, 29, 43, .5); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-btn span:not(.sr-only) { display: block; width: 16px; height: 1.5px; background: var(--cream); transition: transform .25s, opacity .25s; }
nav.open .menu-btn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
nav.open .menu-btn span:nth-child(2) { opacity: 0; }
nav.open .menu-btn span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.care-note { margin: 1.6rem auto 0; max-width: 72ch; text-align: center; font-size: .85rem; line-height: 1.6; color: var(--mist); }
a.phone, a.tphone { color: inherit; text-decoration: none; display: inline-block; }
a.phone:hover, a.tphone:hover { color: var(--gold); }
.mail { margin: -.6rem 0 1.6rem; color: #cfc8b4; }
.mail a { color: var(--gold); }
.gdpr { font-size: .82rem; color: var(--mist); border-top: 1px solid var(--line); padding-top: .9rem; }
.gdpr summary { cursor: pointer; color: #cfc8b4; }
.gdpr dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; margin: .9rem 0 0; }
.gdpr dt { color: var(--gold); }
.gdpr dd { margin: 0; }
.gdpr a, footer a { color: inherit; }


.hero-text {
  position: relative; z-index: 3;
  max-width: 1200px; margin: 0 auto; padding: 8.5rem 24px 0;
}
.eyebrow {
  font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 400;
}
h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3.6rem, 9vw, 7.4rem); line-height: .95; margin: .9rem 0 1.2rem;
  letter-spacing: -.01em; text-wrap: balance;
  animation: lit var(--sweep) linear infinite;
}
.hero.off h1 { animation: none; }
@keyframes lit {
  0%, 30%, 70%, 100% { text-shadow: 0 0 0 rgba(242, 198, 109, 0); }
  50% { text-shadow: 0 0 28px rgba(242, 198, 109, .55), 0 0 2px rgba(242, 198, 109, .5); }
}
.lede { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.35; max-width: 30ch; color: #efe2c4; margin: 0; }
.cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2.2rem; }
.btn {
  font-family: var(--body); font-size: .9rem; letter-spacing: .08em; font-weight: 400;
  padding: .85rem 1.5rem; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--gold); transition: background .25s, color .25s, box-shadow .25s;
  display: inline-flex; align-items: center; gap: .6rem;
}
.btn-solid { background: var(--gold); color: var(--night); }
.btn-solid:hover { box-shadow: 0 0 28px rgba(242, 198, 109, .45); }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(246, 231, 193, .45); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.bulb { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); transition: background .4s, box-shadow .4s; }
.hero.off .bulb { background: #55636a; box-shadow: none; }

/* lighthouse parts */
.beam { transform-origin: 0 0; animation: sweep var(--sweep) cubic-bezier(.45, 0, .55, 1) infinite; transition: opacity .8s; }
@keyframes sweep {
  0%   { transform: scaleX(1);    opacity: .95; }
  25%  { transform: scaleX(.02);  opacity: .35; }
  50%  { transform: scaleX(-1);   opacity: .95; }
  75%  { transform: scaleX(.02);  opacity: .35; }
  100% { transform: scaleX(1);    opacity: .95; }
}
.halo { transform-origin: 0 0; animation: flash var(--sweep) ease-in-out infinite; transition: opacity .8s; }
@keyframes flash {
  0%, 50%, 100% { transform: scale(1); opacity: .75; }
  25%, 75% { transform: scale(1.7); opacity: 1; }
}
.lamp { transition: fill .6s; }
.hero.off .beam, .hero.off .halo { opacity: 0 !important; animation-play-state: paused; }
.hero.off .lamp { fill: #3b4b52; }
.hero.booting .lamp-group { animation: flicker 1.1s steps(1) 1; }
@keyframes flicker { 0% {opacity:.2} 15% {opacity:1} 25% {opacity:.3} 40% {opacity:1} 50% {opacity:.5} 60%,100% {opacity:1} }
.tower { cursor: pointer; }
.wave { animation: drift 14s linear infinite; }
.wave.w2 { animation-duration: 20s; animation-direction: reverse; }
.wave.w3 { animation-duration: 26s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-720px); } }

.tap-hint {
  position: absolute; z-index: 3; right: max(24px, calc(50% - 600px + 24px)); bottom: 28px;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); opacity: .8;
}

/* ---------------- SECTIONS ---------------- */
main { position: relative; }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 24px; }
section { padding-block: 6.5rem; }
.kicker { font-size: .76rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; margin: .7rem 0 1.2rem; text-wrap: balance; }
.intro { max-width: 60ch; color: #d9d2bf; margin: 0; }

/* steps: lights along a coastline */
.route { position: relative; margin-top: 4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.route::before {
  content: ""; position: absolute; top: 15px; left: 15px; right: 15px; height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(242, 198, 109, .15));
}
.step { position: relative; min-width: 0; }
.dot {
  width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  background: var(--night); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--display); font-size: 1.05rem; position: relative; transition: box-shadow .35s, background .35s, color .35s;
}
.step:hover .dot { background: var(--gold); color: var(--night); box-shadow: 0 0 24px 4px rgba(242, 198, 109, .45); }
.step h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 500; margin: 1.3rem 0 .4rem; line-height: 1.15; }
.step p { margin: 0; color: #cfc8b4; font-size: .98rem; }

/* practical info */
.practical { background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid var(--line); }
.fact { padding: 1.8rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.fact + .fact { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.fact .label { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.fact .value { font-variant-numeric: lining-nums; font-family: var(--display); font-size: 1.9rem; margin-top: .4rem; line-height: 1.2; }
.todo { display: inline-block; font-family: var(--body); font-size: .8rem; letter-spacing: .06em; padding: .2rem .7rem; border: 1px dashed rgba(242, 198, 109, .55); color: var(--gold); border-radius: 999px; }
.fact p { margin: .5rem 0 0; color: #cfc8b4; font-size: .95rem; }

/* about: starry night; the lighthouse next to the photo switches on and lights up the text */
.beacon { position: relative; padding-block: 6.5rem 9rem; background: linear-gradient(180deg, #06121b 0%, #0a1d2a 55%, #10313b 100%); overflow: hidden; overflow: clip; }
.about-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.lightwash { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(circle at var(--lx, 20%) var(--ly, 40%), rgba(242, 198, 109, .12) 0, rgba(242, 198, 109, .04) 380px, rgba(242, 198, 109, 0) 760px); }
.beacon.lit .lightwash { opacity: 1; }
.beacon .wrap { position: relative; z-index: 1; }
.about-head { text-align: center; margin-bottom: 3.5rem; }
.about-head h2 { margin-bottom: 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: start; }
.about-side { position: sticky; top: 2.5rem; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.4rem; align-items: end; }
.keeper { position: relative; z-index: 0; width: 100%; aspect-ratio: 170 / 372; }
.keeper svg { width: 100%; height: 100%; overflow: visible; display: block; }
.keeper .k-sweep { transform-origin: 0 0; }
.keeper .k-beam { transform-origin: 0 0; transform: scaleX(0); opacity: 0; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .5s, opacity 1s ease .5s; }
.beacon.lit .k-beam { transform: scaleX(1); opacity: .45; }
.beacon.lit .k-sweep { animation: k-sweep 9s ease-in-out 2.2s infinite alternate; }
@keyframes k-sweep { from { transform: rotate(-4deg); } to { transform: rotate(6deg); } }
.keeper .k-halo { transform-origin: 0 0; opacity: 0; transition: opacity .6s; }
.beacon.lit .k-halo { opacity: 1; }
.keeper .k-lamp { fill: #34444b; transition: fill .4s; }
.beacon.lit .k-lamp { fill: #ffe08a; }
.beacon.lit .k-lampgroup { animation: flicker 1s steps(1) 1; }
.portrait {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5; max-width: 100%; border-radius: 200px 200px 14px 14px;
  background: linear-gradient(180deg, #17384a, #0d2230);
  border: 1px solid var(--line); overflow: hidden;
}
.about-text { position: relative; z-index: 1; min-width: 0; }
.about-text p { color: #e3dccb; max-width: 60ch; margin: 0 0 1.15rem; }
.about-text .quote { font-family: var(--display); font-style: italic; font-size: 1.45rem; line-height: 1.4; color: var(--cream); border-left: 1px solid var(--gold); padding-left: 1.2rem; margin: 2rem 0 0; }
.about-text em { color: var(--gold); }
.beacon.armed .beam-reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.beacon.armed .beam-reveal.shown { opacity: 1; transform: none; }
.reveal-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 1; }

/* com funciona: the family tree grows and fireflies leave it */
.grow { position: relative; overflow: hidden; }
.tree-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grow .wrap { position: relative; z-index: 1; }
.grow-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.tree-spot { height: 400px; }

/* contact */
.contact { text-align: left; background: linear-gradient(180deg, var(--night-2), #0a1a26); position: relative; overflow: hidden; }
.contact .wrap { position: relative; z-index: 1; }
.phone { font-family: var(--display); font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; margin: 1.4rem 0 1.6rem; font-variant-numeric: lining-nums; letter-spacing: .02em; user-select: all; }
.contact-actions { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.copied { font-size: .85rem; color: var(--gold); min-height: 1.2em; }
.contact-glow { position: absolute; right: -10%; top: -40%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(242, 198, 109, .16), transparent 60%); pointer-events: none; }

footer { border-top: 1px solid var(--line); padding-block: 2rem; font-size: .82rem; color: var(--mist); }
footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--cream); }


/* ---------------- DESCÀRREGA ---------------- */
.prepare { padding-block: 0 6.5rem; }
.prepare-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  border: 1px solid var(--line); border-radius: 18px; padding: 2rem 2.2rem;
  background: linear-gradient(120deg, rgba(242, 198, 109, .08), rgba(242, 198, 109, 0) 60%);
}
.prepare-icon { width: 58px; height: 72px; }
.prepare h3 { font-family: var(--display); font-weight: 500; font-size: 1.9rem; line-height: 1.15; margin: 0 0 .3rem; }
.prepare p { margin: 0; color: #cfc8b4; max-width: 56ch; }

/* ---------------- FORMULARI ---------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.form { display: grid; gap: 1.1rem; padding: 2rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(8, 21, 31, .55); }
.field { display: grid; gap: .35rem; }
.field label { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.field input, .field textarea {
  font: inherit; color: var(--cream); background: rgba(246, 231, 193, .04);
  border: 1px solid rgba(246, 231, 193, .2); border-radius: 10px; padding: .75rem .9rem; width: 100%;
  transition: border-color .2s, background .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(246, 231, 193, .07); }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: #cfc8b4; }
.consent input { margin-top: .3rem; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.consent a { color: var(--gold); }
.form-note { font-size: .82rem; color: var(--mist); margin: 0; }
.form-error { font-size: .88rem; color: #f0a48c; min-height: 1.2em; margin: 0; }
.form .btn { justify-self: start; }

/* ---------------- D'ON PROVÉ (origen) ---------------- */
.origin { position: relative; padding-block: 7rem 6rem; background: radial-gradient(ellipse at 85% 0%, rgba(242, 198, 109, .07), transparent 55%), var(--night); }
.origin-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; }
.origin-head h2 { margin-top: .7rem; }
.origin-body p { margin: 0 0 1.1rem; color: #d9d2bf; max-width: 62ch; }
.origin-body .lead { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.45; color: var(--cream); }
.authors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 4rem; border-top: 1px solid var(--line); }
.author { padding: 2rem 2rem 2rem 0; min-width: 0; position: relative; }
.author + .author { padding-left: 2rem; border-left: 1px solid var(--line); }
.author::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.author + .author::before { left: 2rem; }
.author-name { font-family: var(--display); font-size: 1.55rem; line-height: 1.2; color: var(--cream); margin-bottom: .8rem; }
.author p { margin: 0; color: #cfc8b4; font-size: .97rem; }
.author em, .origin em { color: var(--gold); font-style: italic; }
.lookback { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; margin-top: 4.5rem; padding: 3rem; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(135deg, rgba(31, 74, 82, .45), rgba(11, 29, 43, .2)); }
.lookback h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.1; margin: 0 0 1.2rem; text-wrap: balance; }
.lookback p { color: #d9d2bf; margin: 0 0 1rem; max-width: 58ch; }
.lookback strong { color: var(--cream); font-weight: 500; }
.from-q { font-family: var(--display); font-style: italic; font-size: 1.15em; color: var(--mist); }
.questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.questions li { position: relative; padding-left: 2rem; font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.3; color: var(--cream); }
.questions li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px 2px rgba(242, 198, 109, .55); }
.questions li:last-child { color: var(--gold); }

/* photo in "Sobre mi" */
.portrait picture, .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait img { object-fit: cover; object-position: 50% 22%; }


/* ---------------- COM TREBALLEM: a path of light with four stops ---------------- */
.journey { position: relative; overflow: hidden; background:
  radial-gradient(ellipse at 15% 10%, rgba(242, 198, 109, .07), transparent 50%),
  radial-gradient(ellipse at 90% 90%, rgba(111, 163, 160, .10), transparent 55%),
  linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.journey-head { text-align: center; max-width: 640px; margin: 0 auto; }
.journey-head .intro { margin: 0 auto; }
.jtrack { position: relative; margin-top: 4rem; }
.jpath { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 120px; overflow: visible; pointer-events: none; }
.jpath path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .65; vector-effect: non-scaling-stroke; }
.jsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; position: relative; }
.jstep { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.jstep:nth-child(even) { margin-top: 3.2rem; }
.jbadge {
  position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #234b55, #0d2230 70%);
  border: 1px solid rgba(242, 198, 109, .55);
  box-shadow: 0 0 0 6px rgba(242, 198, 109, .06), 0 0 30px rgba(242, 198, 109, .18);
  transition: transform .35s ease, box-shadow .35s ease;
}
.jbadge svg { width: 32px; height: 32px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.jnum {
  position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: var(--night);
  font-family: var(--display); font-weight: 600; font-size: .95rem; font-variant-numeric: lining-nums;
}
.jcard {
  margin-top: 1.3rem; padding: 1.5rem 1.3rem 1.6rem; border-radius: 18px; width: 100%;
  background: linear-gradient(180deg, rgba(246, 231, 193, .055), rgba(246, 231, 193, .015));
  border: 1px solid var(--line);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.jlabel { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.jcard h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin: .45rem 0 .6rem; text-wrap: balance; }
.jcard p { margin: 0; color: #cfc8b4; font-size: .95rem; line-height: 1.6; }
.jstep:hover .jbadge { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(242, 198, 109, .09), 0 0 44px rgba(242, 198, 109, .38); }
.jstep:hover .jcard { transform: translateY(-4px); border-color: rgba(242, 198, 109, .45); background: linear-gradient(180deg, rgba(246, 231, 193, .08), rgba(246, 231, 193, .02)); }
/* when the section comes into view, the badges light up one after another */
.journey.in .jbadge { animation: jglow 1.4s ease calc(var(--i) * .35s) 1 both; }
@keyframes jglow { 0% { box-shadow: 0 0 0 6px rgba(242, 198, 109, .06), 0 0 30px rgba(242, 198, 109, .18); }
  45% { box-shadow: 0 0 0 12px rgba(242, 198, 109, .14), 0 0 60px rgba(242, 198, 109, .55); }
  100% { box-shadow: 0 0 0 6px rgba(242, 198, 109, .06), 0 0 30px rgba(242, 198, 109, .18); } }
.journey.in .jpath path { animation: jflow 30s linear infinite; }
@keyframes jflow { to { stroke-dashoffset: -330; } }

.ticket {
  margin-top: 4rem; display: grid; grid-template-columns: repeat(3, auto) 1fr; align-items: center; gap: 2.4rem;
  padding: 1.8rem 2.2rem; border-radius: 22px; position: relative;
  background: linear-gradient(120deg, rgba(242, 198, 109, .12), rgba(242, 198, 109, .03) 45%, rgba(31, 74, 82, .35));
  border: 1px solid rgba(242, 198, 109, .35);
}
.tfact { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.tfact svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tfact .label { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.tfact .value { font-family: var(--display); font-size: 1.8rem; line-height: 1.1; font-variant-numeric: lining-nums; }
.tfact + .tfact { padding-left: 2.4rem; border-left: 1px solid rgba(242, 198, 109, .25); }
.tcta { display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem; flex-wrap: wrap; }
.tphone { font-family: var(--display); font-size: 1.6rem; font-variant-numeric: lining-nums; letter-spacing: .03em; user-select: all; }

/* genogram example */
.geno { margin: 4.5rem 0 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; align-items: center; }
.geno-art { padding: 1.6rem 1.4rem 1.2rem; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(ellipse at 50% 40%, rgba(31, 74, 82, .45), rgba(11, 29, 43, .15)); }
.geno-art svg { width: 100%; height: auto; display: block; }
.geno-art figcaption { margin-top: .6rem; text-align: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.g-lines path { fill: none; stroke: rgba(236, 224, 200, .75); stroke-width: 2; }
.g-people rect, .g-people circle { fill: #0f2a38; stroke: var(--cream); stroke-width: 2.2; }
.g-people .g-index-ring { fill: none; stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(242, 198, 109, .6)); }
.g-x { fill: none; stroke: var(--cream); stroke-width: 2; }
.g-divorce path, .g-close path { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }
.g-labels text { font-family: var(--body); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; fill: var(--gold); }
.g-labels text.sub { font-size: 16px; letter-spacing: .04em; text-transform: none; fill: var(--mist); font-weight: 300; }
.g-you { font-family: var(--display); font-style: italic; font-size: 20px; fill: var(--gold); text-anchor: middle; }
.geno-legend h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.15; margin: 0 0 .6rem; }
.geno-legend p { margin: 0 0 1.3rem; color: #cfc8b4; }
.geno-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.geno-legend li { display: flex; align-items: center; gap: .9rem; color: var(--cream); font-size: .97rem; }
.geno-legend li svg { width: 40px; height: 24px; flex: none; overflow: visible; }
.geno-legend li svg rect, .geno-legend li svg circle { fill: #0f2a38; stroke: var(--cream); stroke-width: 1.8; }
.geno-legend li svg .ring { fill: none; stroke: var(--gold); }
.geno-legend li svg .ln { fill: none; stroke: var(--cream); stroke-width: 1.8; }
.geno-legend li svg .gold { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.geno-legend li svg .g-x { stroke-width: 1.6; }

@media (max-width: 860px) {
  .prepare-card { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.6rem; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .form { padding: 1.4rem; }
}

@media (max-width: 860px) {
  .route { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; padding-left: 0; }
  .route::before { top: 15px; bottom: 15px; left: 15px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--gold), rgba(242, 198, 109, .15)); }
  .step { padding-left: 3.2rem; }
  .step .dot { position: absolute; left: 0; top: 0; }
  .step h3 { margin-top: 0; }
  .geno { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 3rem; }
  .geno-art { padding: 1rem .6rem .9rem; }
  .jpath { display: none; }
  .jsteps { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .jsteps::before { content: ""; position: absolute; left: 36px; top: 30px; bottom: 30px; border-left: 1.6px dotted rgba(242, 198, 109, .6); }
  .jstep, .jstep:nth-child(even) { flex-direction: row; align-items: flex-start; text-align: left; gap: 1.1rem; margin-top: 0; }
  .jcard { margin-top: 0; padding: 1.2rem 1.2rem 1.3rem; }
  .ticket { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.6rem; }
  .tfact + .tfact { padding-left: 0; border-left: 0; padding-top: 1.2rem; border-top: 1px solid rgba(242, 198, 109, .2); }
  .tcta { justify-content: flex-start; padding-top: .4rem; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact + .fact { padding-left: 0; border-left: 0; }
  .beacon { padding-block: 4.5rem 7rem; }
  .about-head { margin-bottom: 2.2rem; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .about-side { position: relative; top: auto; max-width: 420px; }
  .origin { padding-block: 4.5rem; }
  .origin-grid, .lookback { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .lookback { padding: 1.8rem 1.4rem; gap: 2rem; }
  .authors { grid-template-columns: minmax(0, 1fr); }
  .author, .author + .author { padding: 1.8rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .author + .author::before { left: 0; }
  .about-text p:first-child { font-size: 1.02rem; }
  .grow-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tree-spot { height: 320px; }
}
@media (max-width: 600px) {
  .hero { height: 840px; }
  .scene { top: auto; bottom: 0; height: 480px; }
  .menu-btn { display: inline-flex; }
  .links { display: none; position: absolute; top: calc(100% + .6rem); left: 24px; right: 24px; flex-direction: column; gap: 0; padding: .6rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 21, 31, .96); backdrop-filter: blur(6px); z-index: 10; }
  .links a { padding: .85rem 0; opacity: .9; border-bottom: 1px solid var(--line); }
  .links a:last-child { border-bottom: 0; }
  nav { position: relative; z-index: 5; }
  nav.open .links { display: flex; }
  .moon { display: none; }
  .hero-text { padding-top: 3.5rem; }
  section { padding-block: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .beam, .halo, .wave, h1 { animation: none !important; }
  .beam { transform: scaleX(-1); opacity: .8; }
  html { scroll-behavior: auto; }
}

/* long e-mail addresses wrap instead of overflowing */
.mail, footer, .gdpr dd, .legal p, .legal li { overflow-wrap: anywhere; }