/* Studio interactions. Only decorative layers move across links and controls. */
.hero { padding-top: 0; overflow: visible; }
.hero-art { pointer-events: auto; }
.hero-art > * { pointer-events: none; }
.hero-copy { position: relative; }
.hero-actions .button, .contact-primary .button { justify-content: center; }
.services { border-top: 1px solid var(--line); }
.scatter-title { line-height: 1.17; }
.scatter-title > span, .scatter-title > em { display: inline-block; white-space: nowrap; }
.scatter-title em { font-family: Georgia, serif; font-weight: 400; color: #cbcbbb; }
.scatter-title { width: fit-content; }
.scatter-title .letter {
  display: inline-block;
  transform-origin: 50% 80%;
  transition: transform .48s cubic-bezier(.22,.68,.18,1);
}
.scatter-title [data-scatter] { pointer-events: none; }
.service-body p { max-width: 65ch; }
.service-row .service-plus { transform-origin: center; }
.service-row.is-animating { overflow: hidden; }
.service-row[data-expanded] .service-body {
  transition: opacity .32s ease, transform .44s cubic-bezier(.22,.75,.25,1);
}
.service-row[data-expanded="false"] .service-body { opacity: 0; transform: translateY(-6px); }
.service-row[data-expanded="false"] .service-plus { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) {
  .service-row[data-expanded] .service-body { transition: none; transform: none; }
}

.process-section { border-top: 1px solid var(--line); }
.process-grid article > span { border-top: 1px solid #444448; padding-top: 13px; }

.terms-reading { display: block; max-width: 980px; padding-bottom: 65px; }
.terms-reading .terms-body p { max-width: 78ch; font-size: clamp(14px,1.15vw,17px); line-height: 1.8; }
/* The artwork never shares a stacking level with the interactive controls. */
.contact-primary {
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  --light-x: 56%;
  --mail-yaw: 0deg;
  --mail-pitch: 0deg;
  border: 1px solid #36373b;
  border-radius: 9px;
  background: #17191c;
  transition: border-color .6s ease;
}
.contact-atmosphere, .mail-stage, .invite-surface { pointer-events: none; }
.contact-atmosphere { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(ellipse at var(--light-x) -8%, #68736c4f, transparent 66%),
  linear-gradient(154deg, #23262b 0%, #16181b 67%); }
.contact-atmosphere::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 25%, #c7dad411 46%, transparent 65%);
  transform: translateX(-42%); opacity: 0;
  transition: transform 1.2s cubic-bezier(.2,.72,.18,1), opacity .7s;
}
.contact-primary.is-engaged { border-color: #66736e; }
.is-engaged .contact-atmosphere::after { transform: translateX(14%); opacity: 1; }
.mail-stage {
  position: relative; z-index: 1; display: grid; place-items: center;
  flex: 1 0 auto; min-height: clamp(200px, 18vw, 268px); margin: 8px 0 24px;
  perspective: 900px;
}
.mail-stage::after {
  content: ""; position: absolute; bottom: 8%; left: 25%; width: 50%; height: 12%;
  background: radial-gradient(ellipse, #0009, transparent 70%); filter: blur(5px);
  transition: transform .75s, opacity .75s;
}
.mail-stage .mail-object {
  position: relative; width: clamp(150px,18vw,236px); aspect-ratio: 1.61;
  z-index: 1; isolation: isolate;
  transform: rotateX(14deg) rotateY(-13deg) rotateZ(-9deg);
  transition: transform .72s cubic-bezier(.2,.75,.22,1);
}
.mail-object > div { position: absolute; inset: 0; border-radius: 4px; }
.mail-back {
  z-index: 0;
  background: linear-gradient(150deg, #dce1d3, #c3cbbd 56%, #a4b2a7);
  box-shadow: 0 2px 0 #a0a3a4, 0 12px 18px #03090a44;
}
@property --letter-travel {
  syntax: '<percentage>'; inherits: false; initial-value: -38%;
}
.mail-letter {
  --letter-travel: -38%;
  z-index: 2;
  display: grid; align-items: start; justify-content: end; padding: 8px 9px;
  margin: 0 5px; color: #3b4640;
  background: linear-gradient(140deg, #edeedb, #c4d3c2 65%, #a3b6a8);
  transform: translateY(calc(var(--letter-extension, 0) * var(--letter-travel)));
  transition: --letter-travel .26s ease;
}
.mail-postmark { width: clamp(81px, 9vw, 122px); height: auto; color: #4d665b; transform-origin: 83% 50%; }
.mail-pocket {
  z-index: 3;
  background: conic-gradient(from -55deg at 50% 50%, #788084, #42494c 15%, #858e91 34%, #c2c8c6 42%, #586064 64%, #969e9f 84%, #555c60);
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}
.mail-pocket::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(155deg, #d6d9d4, #a7aba7 43%, #707876);
  clip-path: polygon(0 100%, 50% 49%, 100% 100%);
}
.mail-flap {
  z-index: var(--flap-layer, 4); transform-origin: 50% 1px;
  transform: perspective(680px) rotateX(var(--flap-angle, 0deg));
  background: linear-gradient(160deg, #e2e4e0, #a0a9a7 55%, #6a7476 80%, #e4e8e1);
  clip-path: polygon(0 0, 100% 0, 51% 57%, 49% 57%);
}
.contact-primary.is-engaged .mail-object {
  transform: translateY(-4px) rotateX(calc(5deg + var(--mail-pitch))) rotateY(calc(-7deg + var(--mail-yaw))) rotateZ(-4deg);
}
.is-engaged .mail-stage::after { transform: scale(.82); opacity: .65; }
.contact-content { position: relative; z-index: 2; }
.contact-primary .contact-content h2 {
  margin: 0 0 26px; letter-spacing: -.055em; line-height: 1.01;
  font-size: clamp(39px,4.4vw,67px);
}
.contact-content h2 > * { display: block; width: fit-content; transition: transform .72s cubic-bezier(.2,.7,.25,1), color .58s; }
.contact-content h2 em { font-family: Georgia,serif; font-weight: 400; color: #bfc6c1; }
.is-engaged .contact-content h2 > span { transform: translateY(-2px); }
.is-engaged .contact-content h2 em { transform: translateX(5px); color: #e2e9db; }
.contact-primary .contact-open {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: space-between; gap: 16px;
  width: 100%; max-width: none; min-height: 54px; padding: 15px 21px;
  background: #e6e8e0; color: #1f2521; border-radius: 5px;
}
.contact-open::before { content: ""; position: absolute; z-index: 0; inset: 0;
  background: linear-gradient(105deg,#eaf1e3,#b9cdbf); transform: translateX(-102%); transition: transform .72s cubic-bezier(.22,.8,.24,1); pointer-events: none; }
.is-engaged .contact-open::before { transform: none; }
.contact-open > * { z-index: 1; position: relative; pointer-events: none; }
.contact-open svg { width: 21px; height: 21px; transition: transform .5s cubic-bezier(.2,.7,.25,1); }
.is-engaged .contact-open svg { transform: translate(2px,-2px) rotate(-8deg); }
.contact-primary:has(.contact-open:is(:hover, :focus-visible)) .mail-letter { --letter-travel: -44%; }
.contact-primary:has(.contact-copy.did-copy) .mail-postmark { animation: stamp-impression .55s ease-out; }
@keyframes stamp-impression {
  0% { opacity: .2; transform: translateY(-3px) rotate(-5deg) scale(1.16); }
  38% { opacity: 1; transform: scale(.94); }
  100% { transform: none; }
}
.contact-open:hover svg, .contact-open:focus-visible svg { transform: translate(4px,-4px) rotate(-11deg); }
.contact-primary .bot-handle { max-width: none; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.contact-tag { cursor: text; color: #bdc5bf; transition: color .45s; }
.is-engaged .contact-tag { color: #f0f4eb; }
.contact-copy { display: inline-flex; gap: 6px; align-items: center; padding: 6px 0 6px 8px; color: #a0a8a3; }
.contact-copy svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-copy .copy-sheets, .contact-copy .copy-done { transform-origin: center; transition: transform .28s, opacity .28s; }
.contact-copy .copy-done, .contact-copy.did-copy .copy-sheets { opacity: 0; transform: scale(.7); }
.contact-copy.did-copy .copy-done { opacity: 1; transform: none; }
.is-engaged .contact-copy { color: #d7ded7; }

.invitation { margin-top: 36px; margin-bottom: 56px; }
.invite-card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
  grid-template-columns: 1.14fr .86fr; min-height: clamp(270px,24vw,390px);
  border-radius: 8px; background-color: #e6e6df; color: #191c1b;
  padding: clamp(27px,4.6vw,68px); text-decoration: none;
  transition: background-color .65s;
}
.invite-card.is-engaged { background-color: #e1e5df; }
.invite-surface {
  position: absolute; z-index: 0; inset: 0 0 0 52%; display: grid; place-items: center;
  background: radial-gradient(ellipse at 56% 54%, #b4c2b34a, transparent 66%);
}
.plane-scene { display: block; width: 100%; height: 100%; overflow: visible; }
.plane-bearing {
  transform-box: view-box; transform-origin: 56% 50%;
  transform: translateY(var(--flight-y, 0px)) rotate(var(--flight-roll, 0deg));
  transition: transform .42s ease-out;
}
.paper-face { fill: url(#paper-stock); stroke: #78887a; stroke-width: .65px; }
.facet-far-tip .paper-face, .facet-near-tip .paper-face { fill: url(#wing-light); }
.facet-spine .paper-face { fill: var(--spine-ink, #c9d4ce); }
.facet-valley .paper-face { fill: var(--valley-ink, #d9e2dd); }
.facet-far .paper-face { fill: url(#under-wing); }
.flight-line { stroke-dasharray: 1; stroke-dashoffset: var(--trail-offset, 1); opacity: .72; }
.plane-shadow { transform-box: fill-box; transform-origin: center; }
.invite-copy { position: relative; z-index: 2; grid-column: 1; min-width: 0; justify-self: start; }
.invite-copy h2 { font-size: clamp(41px,5.3vw,82px); letter-spacing: -.067em; line-height: 1.04; margin: 0; }
.invite-copy em { font-family: Georgia,serif; font-weight: 400; color: #50594f; }
.invite-question, .invite-copy em span { display: inline-block; }
.invite-copy em span { transform-origin: 0 82%; }
.invite-action {
  position: relative; z-index: 2; display: inline-grid; grid-template-columns: var(--left-slot, 29px) auto var(--right-slot, 0px);
  align-items: center; margin-top: 23px; padding: 9px 15px; border-radius: 24px;
  background: #252925; color: #fafbf5; font-size: 13px; line-height: 1.3; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: background-color .35s;
}
.is-engaged .invite-action { background: #233a30; }
.invite-dock { min-width: 0; height: 25px; display: grid; align-items: center; overflow: hidden; }
.invite-dock svg { display: block; width: 100%; max-width: 23px; height: auto; aspect-ratio: 1; background: #f0f5e7; color: #233a30; border-radius: 50%; }
.dock-left { justify-items: start; }
.dock-right { justify-items: end; }
.invite-card:focus-visible { outline: 2px solid #cbdfb2; outline-offset: 5px; }

/* Reading copy, identifiers and form controls can be selected. UI chrome cannot. */
body { -webkit-user-select: none; user-select: none; }
:where(main p, main li, main blockquote, .contact-tag, .bot-handle a, .form-status, .toast,
       .admin-form label, .admin-field, #admin-identity, .staff-row, input, textarea, select,
       [contenteditable="true"], pre, code) { -webkit-user-select: text; user-select: text; }
img, .hero-art, .invite-card, .mail-stage, .contact-open {
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none;
}
.footer-bottom a { padding: 8px 0; }
@media(max-width:640px) {
  .hero { overflow: visible; }
  .hero-art { overflow: clip; margin-left: 0; margin-right: 0; }
  .hero-copy { z-index: 2; }
  .nav { top: 100%; z-index: 5; }
  .scatter-title { font-size: clamp(42px,11vw,70px); }
  .invite-card { grid-template-columns: 1fr; padding: 26px 22px; min-height: 0; }
  .invite-surface { position: relative; inset: auto; width: 100%; height: clamp(138px,40vw,188px); grid-row: 1; margin-bottom: 8px; }
  .invite-copy { grid-row: 2; }
  .contact-primary .mail-stage { min-height: 178px; margin: 8px 0 18px; }
  .contact-primary .contact-content h2 { margin-bottom: 20px; }
  .invite-action { font-size: 12px; }
  .invite-copy h2 { font-size: clamp(31px,8.3vw,53px); }
  .footer-bottom { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .scatter-title .letter { transform: none !important; }
}