:root{
  --navy:#0e2733;
  --navy-deep:#0a1d27;
  --gold:#c8a24a;
  --ivory:#ece5d6;
  --muted:#8ca0a8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Raleway', system-ui, sans-serif;
  background:
    radial-gradient(120% 90% at 50% 12%, var(--navy) 0%, var(--navy-deep) 70%);
  color:var(--ivory);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  -webkit-font-smoothing:antialiased;
}

body{
  flex-direction:column;
}
.stage{
  text-align:center;
  max-width:640px;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}
/* Centred hero block (logo + rule + phrase) */
.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Wordmark */
.brand{
  line-height:1;
}
.logo{
  display:block;
  width:clamp(260px, 60vw, 440px);
  height:auto;
  margin:0 auto;
}
.brand .sub{
  font-family:'Raleway', system-ui, sans-serif;
  font-weight:500;
  display:block;
  margin-top:18px;
  font-size:clamp(10px, 2.4vw, 13px);
  letter-spacing:.46em;
  text-transform:uppercase;
  color:var(--ivory);
  opacity:.85;
  /* nudge to optically centre the letter-spaced caps */
  padding-left:.46em;
}

/* Gold divider rule — animated */
.rule{
  width:clamp(160px, 40vw, 280px);
  height:2px;
  margin:38px auto;
  border:none;
  border-radius:2px;
  /* base gold with a travelling highlight */
  background:
    linear-gradient(90deg,
      rgba(200,162,74,0) 0%,
      rgba(200,162,74,.7) 20%,
      rgba(200,162,74,.7) 80%,
      rgba(200,162,74,0) 100%);
  position:relative;
  overflow:hidden;
  /* grow in on load */
  animation:rule-grow 1.1s cubic-bezier(.22,1,.36,1) both;
}
.rule::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,236,190,.95) 50%,
    transparent 100%);
  transform:translateX(-100%);
  animation:rule-shimmer 3.2s ease-in-out 1.2s infinite;
}
@keyframes rule-grow{
  from{ transform:scaleX(0); opacity:0; }
  to{ transform:scaleX(1); opacity:1; }
}
@keyframes rule-shimmer{
  0%   { transform:translateX(-100%); }
  55%  { transform:translateX(100%); }
  100% { transform:translateX(100%); }
}
@media (prefers-reduced-motion: reduce){
  .rule, .rule::after{ animation:none; }
  .rule::after{ display:none; }
}

/* Descriptive phrase */
.phrase{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:400;
  font-size:clamp(30px, 6vw, 48px);
  line-height:1.35;
  color:var(--ivory);
  opacity:.9;
  margin:24px 0 0;
}

/* Rotating "[business/project/staff] management" header */
.rotator{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:400;
  font-size:clamp(30px, 6vw, 48px);
  line-height:1.2;
  color:var(--ivory);
  margin-top:40px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.28em;
}
.rotate{
  display:inline-grid;       /* stack words in one cell */
  text-align:right;
}
.rotate > span{
  grid-area:1 / 1;           /* all rotating words share the slot */
  color:var(--gold);
  white-space:nowrap;
  opacity:0;
  transform:translateY(.35em);
  animation:word-cycle 7.5s infinite;   /* 3 words x 2.5s each */
}
.rotate > span:nth-child(1){ animation-delay:0s; }
.rotate > span:nth-child(2){ animation-delay:2.5s; }
.rotate > span:nth-child(3){ animation-delay:5s; }

/* Offset second line by one word + a small lag so the rows don't flip together */
.rotator--offset .rotate > span:nth-child(1){ animation-delay:5.6s; }
.rotator--offset .rotate > span:nth-child(2){ animation-delay:0.6s; }
.rotator--offset .rotate > span:nth-child(3){ animation-delay:3.1s; }

@keyframes word-cycle{
  0%      { opacity:0; transform:translateY(.35em); }
  5%, 28% { opacity:1; transform:translateY(0); }     /* hold visible */
  33%     { opacity:0; transform:translateY(-.35em); }/* slide out up */
  100%    { opacity:0; transform:translateY(.35em); }
}
@media (prefers-reduced-motion: reduce){
  .rotate > span{ animation:none; }
  .rotate > span:nth-child(1){ opacity:1; transform:none; }
}

/* Contact email */
.contact a{
  color:var(--gold);
  text-decoration:none;
  font-size:clamp(15px, 2.8vw, 18px);
  letter-spacing:.04em;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, opacity .2s ease;
}
.contact a:hover{
  border-color:var(--gold);
}
.contact{
  margin-top:auto;
  padding-top:48px;
}
.contact .label{
  display:block;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}