:root {
  --accent: #0f33ff;
  --ink: #0c0c0c;
  --muted: #858585;
}

html { scroll-behavior: smooth; }
body { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }

.header--logo img,
.device-notification--logo img { width: 58px; height: 42px; object-fit: contain; }
.header--logo p { letter-spacing: .12em; }

.eyebrow {
  position: relative;
  z-index: 3;
  margin: 0 0 12px;
  color: #8f9cff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow.centered { text-align: center; }

.intro--banner h1 { margin-top: 0; max-width: 610px; }
.intro--portrait-shell {
  position: absolute;
  right: -18px;
  bottom: 21px;
  width: 440px;
  height: 440px;
  z-index: 0;
}
.intro--portrait-shell::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 360px;
  height: 360px;
  background: var(--accent);
  transform: rotate(9deg);
}
.intro--portrait-shell::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 3px;
  width: 335px;
  height: 335px;
  border: 2px solid rgba(255,255,255,.6);
  transform: rotate(-6deg);
}
.intro--portrait {
  position: absolute !important;
  right: 48px !important;
  bottom: 0 !important;
  width: 325px !important;
  height: 325px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.03);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  z-index: 2;
}
.portrait-accent { position: absolute; display: block; z-index: 4; }
.portrait-accent--one { left: 25px; top: 80px; width: 32px; height: 32px; border: 6px solid #fff; border-right-color: transparent; transform: rotate(-20deg); }
.portrait-accent--two { right: 0; top: 20px; width: 13px; height: 13px; background: #fff; transform: rotate(45deg); }
.intro--options p { color: #696969; }
.intro--options a:hover p { color: #bbb; }

.work h2 { margin-top: 0; }
.work--lockup .slider--item-image img { height: 100%; object-fit: cover; }
.work--lockup .slider--item-center .slider--item-image { box-shadow: 0 20px 65px rgba(15,51,255,.28); }
.work--lockup .slider--item-description { line-height: 1.65; color: #b7b7b7; }
.work--lockup .slider--item a:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.slider--prev, .slider--next { border: 0; }

.about--banner { height: 500px; }
.about--banner h2 { margin-bottom: 16px; }
.about--banner img { width: 500px; right: -38px; bottom: -25px; }
.about--summary {
  position: relative;
  z-index: 2;
  width: 440px;
  max-width: 52%;
  margin: 0 0 18px;
  color: #a5a5a5;
  font-size: 13px;
  line-height: 1.8;
}
.about--options > a:nth-child(1),
.about-option--thinker { background-image: url('../img/option-thinker.svg') !important; }
.about--options > a:nth-child(2),
.about-option--communicator { background-image: url('../img/option-communicator.svg') !important; }
.about--options > a:nth-child(3),
.about-option--builder { background-image: url('../img/option-builder.svg') !important; }

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(15,51,255,.22), transparent 42%), linear-gradient(90deg, rgba(12,12,12,.12), rgba(12,12,12,.38));
}
.contact--lockup .modal { position: relative; z-index: 1; min-width: 320px; }
.contact--lockup .modal--options > li { width: 160px; }
.contact--lockup .modal--options > li:nth-child(1) { background-color: #0a66c2; }
.contact--lockup .modal--options > li:nth-child(2) { background-color: var(--accent); }
.contact--lockup .modal--options > li:nth-child(3) { background-color: #fff; }
.contact--lockup .modal--options > li:nth-child(3) a { color: #0c0c0c; }

.hire h2 { margin-top: 0; }
.work-request--options label { font-size: 13px; }
.work-request input[type="submit"] { margin-top: 18px; }
.form-note {
  max-width: 520px;
  margin: 14px auto 0;
  color: #777;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.connect-status { min-height: 20px; margin: 7px 0 0; color: #9eabff; font-size: 12px; text-align: center; }

@media (max-width: 1000px) {
  .intro--portrait-shell { width: 390px; height: 405px; }
  .intro--portrait-shell::before { width: 320px; height: 320px; }
  .intro--portrait-shell::after { width: 300px; height: 300px; }
  .intro--portrait { width: 290px !important; height: 360px; right: 38px !important; }
  .about--banner img { width: 420px; opacity: .75; }
}

@media (max-width: 900px) {
  .intro--banner h1 { font-size: 53px; }
  .intro--portrait-shell { transform: scale(.86); transform-origin: right bottom; }
  .about--summary { width: 390px; max-width: 58%; }
}

@media (max-width: 767px) {
  .l-wrapper { max-width: 88%; }
  .header--logo p { display: none; }
  .intro--banner h1 { font-size: 43px; }
  .intro--portrait-shell { right: -52px; transform: scale(.67); }
  .intro--options { margin-top: 8px; }
  .intro--options a:nth-child(n+2) { display: none; }
  .about--banner { height: 390px; }
  .about--banner img { width: 310px; right: -90px; bottom: 0; opacity: .55; }
  .about--summary { max-width: 78%; font-size: 12px; }
  .about--options { max-width: 100%; }
  .about--options > a { width: 115px; height: 62px; border-width: 7px; }
  .contact--lockup .modal { min-width: 0; width: 78%; padding: 35px 25px; }
  .work-request--options label { font-size: 11px; }
}

@media (max-width: 600px) {
  .intro--portrait-shell { display: none; }
  .intro--banner h1 { font-size: 52px; }
  .intro--options { display: block; }
  .intro--options a:first-child { display: block; }
  .eyebrow { font-size: 9px; }
  .about--banner h2 { font-size: 47px; }
  .about--summary { max-width: 100%; width: auto; }
  .about--banner img { display: none; }
  .about--options > a:nth-child(3) { display: none; }
  .work-request--information { margin-bottom: 12px; }
}

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


/* --- Added motion polish and stronger hero treatment --- */
.intro--banner { perspective: 1200px; }
.intro--portrait-shell {
  animation: portraitFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
}
.intro--portrait-shell::before {
  box-shadow: 0 26px 60px rgba(15,51,255,.28);
}
.intro--portrait {
  filter: grayscale(1) contrast(1.08) brightness(.98);
  transition: transform .8s ease, filter .8s ease, box-shadow .8s ease;
  transform-origin: center center;
}
.section--is-active .intro--portrait {
  animation: portraitFlipIn 1.1s cubic-bezier(.2,.7,.1,1) both;
}
.intro--portrait-shell:hover .intro--portrait {
  transform: rotateY(-8deg) translateY(-6px) scale(1.02);
  box-shadow: 0 42px 75px rgba(0,0,0,.55);
}
.section--is-active .eyebrow { animation: fadeUp .6s ease both; }
.section--is-active .intro--banner h1 { animation: fadeUp .75s .08s ease both; }
.section--is-active .intro--banner .cta { animation: fadeUp .75s .18s ease both; }
.section--is-active .intro--options a:nth-child(1) { animation: fadeUp .65s .25s ease both; }
.section--is-active .intro--options a:nth-child(2) { animation: fadeUp .65s .35s ease both; }
.section--is-active .intro--options a:nth-child(3) { animation: fadeUp .65s .45s ease both; }

.section--is-active .work h2,
.section--is-active .about--banner h2,
.section--is-active .hire h2,
.section--is-active .contact .modal { animation: fadeUp .7s ease both; }

.work--lockup .slider {
  transform-style: preserve-3d;
}
.work--lockup .slider--item {
  transition: transform .55s ease, opacity .45s ease, filter .45s ease;
}
.work--lockup .slider--item-left,
.work--lockup .slider--item-right {
  filter: saturate(.9) brightness(.88);
}
.work--lockup .slider--item-center {
  animation: centerCardPulse 4.2s ease-in-out infinite;
}
.work--lockup .slider--item a:hover .slider--item-image,
.work--lockup .slider--item a:focus .slider--item-image {
  transform: translateY(-8px) rotateY(-5deg);
}
.work--lockup .slider--item-image {
  transition: transform .55s ease, box-shadow .55s ease;
  transform-style: preserve-3d;
}

.about--options > a,
.contact--lockup .modal,
.work-request,
.intro--options a {
  transition: transform .45s ease, box-shadow .45s ease, border-color .35s ease;
}
.about--options > a:hover,
.intro--options a:hover,
.contact--lockup .modal:hover {
  transform: translateY(-5px);
}

.scroll-indicator {
  position: absolute;
  right: 26px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
}
.scroll-indicator__line {
  width: 42px;
  height: 1px;
  background: rgba(255,255,255,.35);
  position: relative;
  overflow: hidden;
}
.scroll-indicator__line::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: sweep 1.8s ease-in-out infinite;
}
.scroll-indicator__mouse {
  width: 18px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  position: relative;
}
.scroll-indicator__mouse::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 6px;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 99px;
  animation: wheelMove 1.5s ease infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes portraitFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.1deg); }
}
@keyframes portraitFlipIn {
  0% { opacity: 0; transform: rotateY(26deg) rotateX(4deg) translateY(20px) scale(.97); }
  100% { opacity: 1; transform: rotateY(0deg) rotateX(0deg) translateY(0) scale(1); }
}
@keyframes centerCardPulse {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.015); }
}
@keyframes wheelMove {
  0% { opacity: 0; transform: translate(-50%, 0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 9px); }
}
@keyframes sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

@media (max-width: 767px) {
  .scroll-indicator {
    right: 12px;
    bottom: 14px;
    gap: 8px;
    font-size: 9px;
    letter-spacing: .14em;
  }
  .scroll-indicator__line { width: 28px; }
}

@media (max-width: 600px) {
  .scroll-indicator { display: none; }
}