@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-300.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --phi-charcoal: #131210;
  --phi-ivory: #f6f3ed;
  --phi-white: #ffffff;
  --phi-bronze: #917451;
  --phi-bronze-dark: #6e5438;
  --phi-stone: #d9d2c6;
  --phi-font: "Work Sans", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
  --phi-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100%; margin: 0; color: var(--phi-white); background: var(--phi-charcoal); font-family: var(--phi-font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link { position: fixed; z-index: 20; left: 20px; top: 16px; transform: translateY(-180%); padding: 10px 14px; color: var(--phi-charcoal); background: var(--phi-ivory); text-decoration: none; }
.skip-link:focus { transform: none; }

.transition-hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; padding: 28px clamp(24px, 4vw, 64px) 24px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.transition-hero__image, .transition-hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.transition-hero__image { z-index: -3; object-fit: cover; object-position: 53% center; }
.transition-hero__veil { z-index: -2; background: linear-gradient(90deg, rgba(12,11,10,.83) 0%, rgba(12,11,10,.62) 33%, rgba(12,11,10,.18) 64%, rgba(12,11,10,.05) 100%), linear-gradient(180deg, rgba(12,11,10,.22), transparent 38%, rgba(12,11,10,.38)); }

.transition-brand { width: min(100%, 760px); display: flex; align-items: center; gap: 16px; }
.domain-mark { font-size: 15px; font-weight: 600; letter-spacing: .035em; }
.transition-brand__line { width: 44px; height: 1px; background: var(--phi-bronze); }
.transition-brand__label { color: var(--phi-stone); font-size: 11px; text-transform: uppercase; letter-spacing: .085em; }
.transition-brand img { width: 126px; height: auto; margin-left: 2px; }

.transition-card { width: min(560px, 100%); align-self: center; margin: 32px 0 44px; padding: clamp(28px, 3.2vw, 42px); background: rgba(19,18,16,.72); border: 1px solid rgba(145,116,81,.58); box-shadow: 0 22px 64px rgba(0,0,0,.16); backdrop-filter: blur(12px) saturate(.88); }
.eyebrow { margin: 0 0 18px; color: #c4a77f; font-size: 10px; font-weight: 600; letter-spacing: .075em; }
h1 { max-width: 488px; margin: 0 0 18px; font-size: clamp(36px, 2.85vw, 41px); font-weight: 300; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.transition-card__copy { max-width: 500px; margin: 0 0 14px; color: var(--phi-stone); font-size: 14px; }
.transition-card__bridge { max-width: 500px; margin: 0 0 24px; color: #c7c0b5; font-size: 12px; line-height: 1.55; }
.transition-card__bridge strong { color: var(--phi-white); font-weight: 600; }
.transition-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.button { min-height: 46px; padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 0; font: inherit; font-size: 11px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: color .2s var(--phi-ease), background-color .2s var(--phi-ease), border-color .2s var(--phi-ease), transform .2s var(--phi-ease); }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .transition-footer a:focus-visible { outline: 2px solid #c4a77f; outline-offset: 3px; }
.button--primary { color: var(--phi-white); background: var(--phi-bronze-dark); border-color: var(--phi-bronze); }
.button--primary:hover { background: #5c452f; }
.button--quiet { color: #c4a77f; background: transparent; border-color: rgba(145,116,81,.38); }
.button--quiet:hover { border-color: var(--phi-bronze); }
.button--quiet[hidden] { display: none; }
.redirect-status { margin: 18px 0 0; color: #b8b0a5; font-size: 11px; }
.redirect-status strong { color: var(--phi-white); font-weight: 600; }

.transition-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; color: rgba(255,255,255,.8); font-size: 10px; }
.transition-footer p { margin: 0; }
.transition-footer nav { display: flex; flex: 0 0 auto; gap: 20px; }
.transition-footer a { text-decoration: none; }
.transition-footer a:hover { color: #c4a77f; }

.legal-page { color: #1b1a18; background: var(--phi-ivory); }
.legal-header { min-height: 84px; padding: 18px clamp(24px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--phi-white); border-bottom: 1px solid var(--phi-bronze); }
.legal-header img { width: 141px; height: auto; }
.legal-header a:last-child { color: var(--phi-bronze-dark); font-size: 12px; text-decoration: none; }
.legal-content { width: min(100% - 48px, 780px); margin-inline: auto; padding-block: 88px; }
.legal-content .eyebrow { color: var(--phi-bronze-dark); }
.legal-content h1 { margin-bottom: 36px; color: #1b1a18; }
.legal-content h2 { margin: 36px 0 12px; font-size: 22px; font-weight: 400; }
.legal-content a { color: var(--phi-bronze-dark); }
.legal-content ul { padding-left: 22px; }
.legal-content li + li { margin-top: 6px; }
.legal-content code { font-family: inherit; font-size: .95em; }
.release-warning { margin-top: 44px; padding: 18px 20px; border-left: 3px solid var(--phi-bronze); background: var(--phi-white); font-weight: 600; }

@media (max-width: 720px) {
  .transition-hero { padding: 22px 20px 18px; }
  .transition-hero__image { object-position: 34% center; }
  .transition-hero__veil { background: linear-gradient(180deg, rgba(12,11,10,.62) 0%, rgba(12,11,10,.3) 28%, rgba(12,11,10,.42) 58%, rgba(12,11,10,.82) 100%); }
  .transition-brand { flex-wrap: wrap; gap: 10px 13px; }
  .transition-brand__line { width: 28px; }
  .transition-brand__label { font-size: 9px; }
  .transition-brand img { width: 114px; }
  .transition-card { align-self: end; margin: 24px 0; padding: 24px 22px; background: rgba(19,18,16,.8); }
  h1 { font-size: clamp(32px, 8.6vw, 38px); }
  .transition-card__copy { font-size: 13px; }
  .transition-card__bridge { margin-bottom: 20px; font-size: 11.5px; }
  .transition-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .transition-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 410px) {
  .transition-brand__label, .transition-brand__line { display: none; }
  .transition-brand { justify-content: space-between; }
  .transition-card { margin-top: 18px; }
  .transition-card__copy { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}