/* Pen-led hero: a lightweight luxury signature moment.  This layer deliberately
   leaves the established hero layout in charge of the logo, content, and scroll cue. */
.signature-hero {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(70% 54% at 55% 44%, rgba(47, 102, 141, .16), transparent 68%),
    radial-gradient(45% 34% at 22% 86%, rgba(148, 185, 208, .08), transparent 72%),
    #030507 !important;
}

.signature-hero .hero-grid,
.signature-hero .wave-field,
.signature-hero .scanlines,
.signature-hero .hero-journey-copy,
.signature-hero .lightshow-keyboard {
  display: none !important;
}

.signature-hero .hero-copy {
  position: relative;
  z-index: 3;
}

/* These must remain absolutely positioned.  Changing either to relative
   makes it join the hero's normal document flow and breaks the full layout. */
.signature-hero .hero-mark,
.signature-hero .scroll-note {
  position: absolute;
  z-index: 3;
}

/* Let the official mark keep its place on desktop/tablet without the clipped
   control-panel frame that was cutting into the crown. */
@media (min-width: 751px) {
  .signature-hero .hero-mark {
    width: min(34vw, 430px);
    padding: 17px 18px 19px;
    overflow: visible;
    clip-path: none;
    background: linear-gradient(145deg, rgba(18, 38, 54, .42), rgba(3, 7, 11, .18));
    border-color: rgba(149, 220, 255, .22);
    box-shadow: 0 0 24px rgba(45, 158, 255, .10);
  }

  .signature-hero .hero-mark::before,
  .signature-hero .hero-mark::after { display: none; }

  .signature-hero .hero-mark img {
    mix-blend-mode: normal;
    opacity: .98;
  }
}

/* The old status line occupies the same visual lane as the signature. */
.signature-hero > .eyebrow { display: none !important; }

.signature-pen-stage {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.signature-pen-rig {
  position: absolute;
  width: min(56vw, 760px);
  top: clamp(-72px, -5vh, -38px);
  left: 10vw;
  opacity: 0;
  transform: translate3d(-88%, 0, 0) rotate(-1.6deg);
  transform-origin: 92% 50%;
  will-change: transform, opacity;
}

.signature-pen {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(207, 235, 255, .20));
}

.signature-ink-trace {
  position: absolute;
  top: 184px;
  left: calc(10vw + 2px);
  width: 0;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(221, 247, 255, .92), rgba(62, 178, 255, .84), transparent);
  box-shadow: 0 0 7px rgba(83, 190, 255, .48);
}

.signature-hero.signature-ready .signature-pen-rig {
  animation: acePenWrite 4.9s cubic-bezier(.22,.78,.22,1) .12s both;
}

.signature-hero.signature-ready .signature-ink-trace {
  animation: aceInkTrace 4.05s cubic-bezier(.22,.78,.22,1) .52s both;
}

/* The pen writes the brand signature.  Everything else remains visible from
   the first frame so the page is never left looking unfinished. */
.signature-hero .hero-copy .script {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  color: #effbff;
  font: italic 700 clamp(24px, 2.4vw, 34px)/1.08 'Playfair Display', serif;
  letter-spacing: .035em;
  text-transform: none;
  text-shadow: 0 0 5px rgba(199, 241, 255, .72), 0 0 14px rgba(61, 174, 243, .35);
}

.signature-hero.signature-ready .hero-copy .script { animation: aceSignatureWrite 4.05s linear .52s forwards; }

@keyframes acePenWrite {
  0% { opacity: 0; transform: translate3d(-88%, 0, 0) rotate(-1.6deg); }
  7% { opacity: .96; transform: translate3d(-84%, 0, 0) rotate(-1.15deg); }
  22% { opacity: .96; transform: translate3d(-74%, -2px, 0) rotate(-2.15deg); }
  38% { opacity: .96; transform: translate3d(-63%, 2px, 0) rotate(-.72deg); }
  55% { opacity: .96; transform: translate3d(-53%, -1px, 0) rotate(-2.05deg); }
  71% { opacity: .94; transform: translate3d(-43%, 2px, 0) rotate(-.88deg); }
  84% { opacity: .82; transform: translate3d(-34%, 0, 0) rotate(-1.75deg); }
  100% { opacity: 0; transform: translate3d(-25%, 3px, 0) rotate(-1.6deg); }
}

@keyframes aceInkTrace {
  0% { width: 0; opacity: 0; }
  12% { opacity: .7; }
  82% { width: min(27vw, 350px); opacity: .68; }
  100% { width: min(29vw, 382px); opacity: 0; }
}

@keyframes aceSignatureWrite {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  7% { opacity: 1; }
  84% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Sound must wait for a visitor interaction on modern browsers.  The cue lives
   beside the existing scroll note, so it never shifts the hero layout. */
.signature-hero:not(.signature-audio-played) .scroll-note::before {
  content: 'Tap once to hear the pen write  ·  ';
  color: rgba(196, 233, 255, .82);
  text-shadow: 0 0 8px rgba(55, 174, 255, .38);
}

.signature-hero.signature-audio-played .scroll-note::before {
  content: '';
}

/* Refined interaction polish across every page. */
button,
.button,
.journey-button,
.project-submit-button,
.faq-action,
.footer-faq {
  transition: transform .24s ease, border-color .24s ease, background-color .24s ease, box-shadow .24s ease, color .24s ease;
}

button:not(:disabled):hover,
.button:hover,
.journey-button:hover,
.project-submit-button:hover,
.faq-action:hover,
.footer-faq:hover {
  transform: translateY(-2px);
  border-color: rgba(224, 246, 255, .84);
  box-shadow: 0 8px 22px rgba(50, 170, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .20);
}

button:not(:disabled):active,
.button:active,
.journey-button:active,
.project-submit-button:active,
.faq-action:active,
.footer-faq:active { transform: translateY(0) scale(.985); }

h1, h2, h3, .script, .eyebrow, .footer a { transition: color .22s ease, text-shadow .22s ease, opacity .22s ease; }
h1:hover, h2:hover, h3:hover, .script:hover, .eyebrow:hover, .footer a:hover { color: #f4fbff; text-shadow: 0 0 8px rgba(128, 211, 255, .42); }

/* Reviews are consistently warm gold, including the future-project prompt. */
.project-review > span,
.review-card .stars,
.journey-testimonial-slide .stars,
.stars,
.coming-review > span,
.star-rating label {
  color: #e9c86a !important;
  text-shadow: 0 0 7px rgba(246, 204, 92, .55), 0 0 16px rgba(232, 181, 44, .20) !important;
}

.coming-review > span { opacity: .72; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #fff0a7 !important; }

@media (max-width: 750px) {
  .signature-pen-rig {
    width: 96vw;
    top: clamp(-48px, -5vh, -20px);
    left: 7vw;
  }

  .signature-ink-trace {
    top: calc(clamp(112px, 17vh, 142px) + 8px);
    left: 7vw;
  }

  .signature-hero .hero-copy .script {
    font-size: clamp(22px, 7vw, 29px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-hero .signature-pen-rig { display: none; }
  .signature-hero .signature-ink-trace { display: none; }
  .signature-hero .hero-copy .script { clip-path: none; opacity: 1; }
  .signature-hero *, button, .button { animation: none !important; transition-duration: 0s !important; }
}

/* A quiet legal line beneath the existing footer details on every page. */
footer > .footer-copyright {
  display: block;
  grid-column: 1 / -1 !important;
  grid-row: 4;
  justify-self: center;
  margin: 13px 0 0 !important;
  color: rgba(178, 205, 222, .50);
  font: 400 8px/1.3 'DM Mono', monospace;
  letter-spacing: .06em;
  text-align: center;
  text-shadow: none;
}

body.resume-page .resume-copyright {
  margin: 14px 7vw 26px;
  color: rgba(178, 205, 222, .50);
  font: 400 8px/1.3 'DM Mono', monospace;
  letter-spacing: .06em;
  text-align: center;
}

@media (max-width: 750px) {
  footer > .footer-copyright {
    grid-column: 1 / -1 !important;
    grid-row: 5;
    margin-top: 14px !important;
  }
}

/* Desktop and tablet: keep the full footer content, but bring the whole
   composition upward so it reads as one compact closing line. */
@media (min-width: 751px) {
  footer {
    padding-top: 28px;
    padding-bottom: 16px;
    gap: 12px 20px;
  }

  footer .footer-enterprise,
  footer .footer-domain,
  footer .footer-year {
    margin-top: 14px !important;
  }

  footer > .footer-copyright {
    margin-top: 8px !important;
  }
}