/* ============================================================
   Intro: new brand (gold Ψ emblem, ivory satin background)
   - background art made without text, so every word stays real text
   - wide image on computers, tall image on phones
   ============================================================ */
html body #intro#intro{background:#FAF6EC url("brand/bg_wide.webp") center/cover no-repeat fixed !important}
@media (max-aspect-ratio:4/5){html body #intro#intro{background-image:url("brand/bg_tall.webp") !important}}
@media (max-width:820px){html body #intro#intro{background-attachment:scroll !important}}
html body #intro#intro .bgimg,html body #intro#intro .bgshade,html body #intro#intro .grain,html body #intro#intro .aura{display:none !important}

/* emblem */
html body #intro#intro .rlogo{width:clamp(150px,22vh,220px) !important;height:clamp(150px,22vh,220px) !important;border-radius:0 !important;background:none !important;box-shadow:none !important;margin:0 auto 6px !important;cursor:pointer;animation:psiFloat 6s ease-in-out infinite}
html body #intro#intro .rlogo img{width:100% !important;height:100% !important;object-fit:contain !important;border-radius:0 !important;background:none !important;filter:drop-shadow(0 14px 24px rgba(176,144,79,.28))}
@keyframes psiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){html body #intro#intro .rlogo{animation:none}}

/* title: big navy word, gold spaced second line */
html body #intro#intro .intro-inner h1{font-family:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif !important;font-weight:600 !important;text-transform:uppercase;color:#0E1F3A !important;font-size:clamp(34px,7.4vw,74px) !important;line-height:1 !important;letter-spacing:.02em;margin:6px 0 0 !important}
html body #intro#intro .intro-inner h1 .t2{display:block;color:#A8823F !important;font-size:.36em;font-weight:600;letter-spacing:.42em;margin-top:.55em;padding-left:.42em}
html body #intro#intro .intro-inner .lead{color:#55657A !important;font-size:clamp(14px,1.9vw,19px) !important;margin:14px auto 0 !important;letter-spacing:.01em}
/* thin gold divider with a dot, as in the design */
html body #intro#intro .intro-inner .lead::after{content:"";display:block;width:min(260px,60vw);height:9px;margin:16px auto 4px;background:radial-gradient(circle,#C9A35C 0 3.5px,transparent 4.5px) center/9px 9px no-repeat,linear-gradient(90deg,transparent,#C9A35C 30%,#C9A35C 44%,transparent 46%,transparent 54%,#C9A35C 56%,#C9A35C 70%,transparent) center/100% 1px no-repeat}

/* buttons: navy and ivory pair */
html body #intro#intro .intro-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:22px !important;max-width:820px !important;margin:22px auto 0 !important}
@media (max-width:640px){html body #intro#intro .intro-actions{grid-template-columns:1fr !important;gap:12px !important;max-width:420px !important}}
html body #intro#intro .intro-actions .start{min-height:62px;border-radius:14px !important;background:linear-gradient(180deg,#14284A,#0B1A33) !important;color:#fff !important;border:1px solid #C9A35C !important;box-shadow:0 16px 30px -18px rgba(14,31,58,.7) !important}
html body #intro#intro .intro-actions .start.reg{background:rgba(255,252,244,.92) !important;color:#0E1F3A !important}

/* both specialists, centred between gold rules */
html body #intro#intro .author--foot{display:block;text-align:center;color:#55657A !important;font-size:13.5px !important;margin-top:clamp(18px,5vh,46px) !important}
html body #intro#intro .author--foot::before,html body #intro#intro .author--foot::after{content:"";display:inline-block;vertical-align:middle;width:46px;height:1px;background:#C9A35C;margin:0 14px}
@media (max-width:520px){html body #intro#intro .author--foot{display:block;text-align:center}html body #intro#intro .author--foot::before,html body #intro#intro .author--foot::after{display:none}}
html body #intro#intro .intro-inner{padding-top:clamp(28px,6vh,70px) !important}

html body #intro#intro::before,html body #intro#intro::after{display:none !important}
/* phones: the names sit over the navy wave, keep them readable */
@media (max-width:820px){html body #intro#intro .author--foot{display:table !important;margin-left:auto !important;margin-right:auto !important;background:rgba(255,252,244,.9);border:1px solid rgba(201,163,92,.45);border-radius:12px;padding:8px 14px;max-width:92%}}

/* ============================================================
   Intro "wow": about one second, never blocks anything
   ============================================================ */
html body #intro#intro .rlogo{position:relative;overflow:visible}
/* a soft gold halo breathes behind the emblem */
html body #intro#intro .rlogo::before{content:"";position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,rgba(214,178,106,.35),rgba(214,178,106,0) 62%);z-index:-1;animation:psiHalo 5s ease-in-out infinite}
@keyframes psiHalo{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
/* a light sweep crosses the emblem on arrival, then every few seconds */
html body #intro#intro .rlogo::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("brand/logo.webp") center/contain no-repeat;mask:url("brand/logo.webp") center/contain no-repeat;
  background:linear-gradient(115deg,transparent 30%,rgba(255,250,230,.95) 48%,transparent 62%) -160% 0/250% 100% no-repeat;
  animation:psiSweep 6.5s cubic-bezier(.4,0,.2,1) .5s infinite}
@keyframes psiSweep{0%{background-position:-160% 0}22%,100%{background-position:160% 0}}
/* the emblem arrives with a gentle scale and the ring of light opens */
html body #intro#intro .rlogo img{animation:psiIn 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes psiIn{from{opacity:0;transform:scale(.82) rotate(-8deg);filter:blur(6px) drop-shadow(0 14px 24px rgba(176,144,79,.28))}to{opacity:1;transform:none}}
/* title: the navy word rises, the gold line opens its letter spacing */
html body #intro#intro .intro-inner h1{animation:psiTitle .9s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes psiTitle{from{opacity:0;transform:translateY(18px);letter-spacing:.12em}to{opacity:1;transform:none;letter-spacing:.02em}}
html body #intro#intro .intro-inner h1 .t2{animation:psiSub 1.2s cubic-bezier(.2,.8,.2,1) .55s both}
@keyframes psiSub{from{opacity:0;letter-spacing:.05em}to{opacity:1;letter-spacing:.42em}}
html body #intro#intro .intro-inner .lead{animation:psiFade .8s ease .8s both}
html body #intro#intro .intro-actions{animation:psiFade .8s ease 1s both}
html body #intro#intro .author--foot{animation:psiFade .8s ease 1.2s both}
@keyframes psiFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* buttons: a gold shine passes on hover */
html body #intro#intro .intro-actions .start{position:relative;overflow:hidden}
html body #intro#intro .intro-actions .start::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,236,190,.55),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
html body #intro#intro .intro-actions .start:hover::after{left:130%}
@media (prefers-reduced-motion:reduce){html body #intro#intro .rlogo::before,html body #intro#intro .rlogo::after,html body #intro#intro .rlogo img,html body #intro#intro .intro-inner h1,html body #intro#intro .intro-inner h1 .t2,html body #intro#intro .intro-inner .lead,html body #intro#intro .intro-actions,html body #intro#intro .author--foot{animation:none !important}}