/* Inicio: capa visual aislada. No modifica la lógica de navegación ni los filtros. */

body:has(#home-view:not([hidden])) {
  --cc-white: #ffffff;
  --cc-gray: #f5f7fa;
  --cc-navy: #14243a;
  --cc-blue: #4263eb;
  --cc-soft-blue: #e3eaf5;
  --cc-muted: #536173;
  --cc-border: #dce4ef;
  background: var(--cc-gray);
  color: var(--cc-navy);
}

body:has(#home-view:not([hidden])) header {
  background: var(--cc-white);
  border-bottom-color: var(--cc-border);
}

body:has(#home-view:not([hidden])) .header-inner {
  min-height: 80px;
}

body:has(#home-view:not([hidden])) .brand-mark {
  background: var(--cc-blue);
  border-radius: 12px;
  box-shadow: 0 8px 18px #4263eb2e;
}

body:has(#home-view:not([hidden])) .brand strong,
body:has(#home-view:not([hidden])) .main-nav .header-link,
body:has(#home-view:not([hidden])) .auth-login {
  color: var(--cc-navy);
}

body:has(#home-view:not([hidden])) .brand small {
  color: var(--cc-muted);
}

body:has(#home-view:not([hidden])) .main-nav .header-link {
  border-radius: 8px;
  padding: 10px 8px;
  transition: color .2s, background .2s;
}

body:has(#home-view:not([hidden])) .main-nav .header-link:hover,
body:has(#home-view:not([hidden])) .main-nav a[aria-current="page"] {
  color: var(--cc-blue);
  background: var(--cc-gray);
}

body:has(#home-view:not([hidden])) .auth-login,
body:has(#home-view:not([hidden])) .auth-register {
  border-radius: 9px;
  border-color: var(--cc-blue);
}

body:has(#home-view:not([hidden])) .auth-login:hover {
  background: var(--cc-soft-blue);
}

body:has(#home-view:not([hidden])) .auth-register,
body:has(#home-view:not([hidden])) .primary {
  background: var(--cc-blue);
}

body:has(#home-view:not([hidden])) .auth-register:hover,
body:has(#home-view:not([hidden])) .primary:hover {
  background: var(--cc-navy);
}

body:has(#home-view:not([hidden])) .demo-mode-bar {
  color: var(--cc-muted);
  padding-top: 12px;
  padding-bottom: 12px;
}

body:has(#home-view:not([hidden])) .demo-mode-bar select {
  border-color: var(--cc-border);
  color: var(--cc-navy);
}

body:has(#home-view:not([hidden])) .hero {
  background: var(--cc-navy);
  padding: 82px 0 112px;
}

body:has(#home-view:not([hidden])) .hero::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: 8%;
  bottom: -190px;
  border: 1px solid #e3eaf54d;
  border-radius: 50%;
  pointer-events: none;
}

body:has(#home-view:not([hidden])) .hero::after {
  width: 430px;
  height: 430px;
  right: -130px;
  top: -180px;
  border: 70px solid #4263eb36;
}

body:has(#home-view:not([hidden])) .eyebrow {
  color: var(--cc-soft-blue);
}

body:has(#home-view:not([hidden])) .eyebrow::before {
  background: var(--cc-blue);
  box-shadow: 0 0 0 5px #4263eb2e;
}

body:has(#home-view:not([hidden])) #hero-title {
  max-width: 760px;
  margin-top: 22px;
  font-weight: 760;
  letter-spacing: -2.4px;
}

body:has(#home-view:not([hidden])) #hero-title span {
  color: var(--cc-soft-blue);
}

body:has(#home-view:not([hidden])) .hero p {
  max-width: 590px;
  color: #d7dfeb;
}

body:has(#home-view:not([hidden])) .home-content {
  padding-bottom: 72px;
}

body:has(#home-view:not([hidden])) .search-panel {
  margin-top: -54px;
  padding: 26px;
  border-color: var(--cc-border);
  border-radius: 20px;
  box-shadow: 0 18px 45px #14243a14;
}

body:has(#home-view:not([hidden])) .search-grid {
  gap: 14px;
}

body:has(#home-view:not([hidden])) .search-panel label {
  color: var(--cc-navy);
  letter-spacing: .06em;
}

body:has(#home-view:not([hidden])) .search-panel input,
body:has(#home-view:not([hidden])) .search-panel select {
  background: var(--cc-white);
  border-color: var(--cc-border);
  border-radius: 10px;
  color: var(--cc-navy);
}

body:has(#home-view:not([hidden])) .search-panel input:focus,
body:has(#home-view:not([hidden])) .search-panel select:focus {
  border-color: var(--cc-blue);
  box-shadow: 0 0 0 3px #4263eb24;
  outline: none;
}

body:has(#home-view:not([hidden])) .search-bottom {
  color: var(--cc-muted);
}

body:has(#home-view:not([hidden])) .reset {
  color: var(--cc-blue);
}

body:has(#home-view:not([hidden])) .reset:hover {
  color: var(--cc-navy);
}

body:has(#home-view:not([hidden])) .home-actions {
  gap: 12px;
  margin-top: 24px;
}

body:has(#home-view:not([hidden])) .home-actions a {
  min-height: 48px;
  border-radius: 10px;
  padding: 13px 20px;
  gap: 28px;
}

body:has(#home-view:not([hidden])) .home-actions .primary {
  box-shadow: 0 8px 18px #4263eb2e;
}

body:has(#home-view:not([hidden])) .home-secondary {
  border-color: var(--cc-border);
  background: var(--cc-white);
  color: var(--cc-blue);
}

body:has(#home-view:not([hidden])) .home-secondary:hover {
  border-color: var(--cc-blue);
  background: var(--cc-soft-blue);
}

body:has(#home-view:not([hidden])) .home-caption {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--cc-muted);
}

body:has(#home-view:not([hidden])) :focus-visible {
  outline-color: var(--cc-blue);
}

@media (max-width: 950px) {
  body:has(#home-view:not([hidden])) .hero {
    padding-bottom: 96px;
  }
}

@media (max-width: 680px) {
  body:has(#home-view:not([hidden])) .header-inner {
    min-height: 76px;
  }

  body:has(#home-view:not([hidden])) .hero {
    padding: 54px 0 84px;
  }

  body:has(#home-view:not([hidden])) #hero-title {
    font-size: clamp(34px, 10vw, 48px);
    letter-spacing: -1.6px;
  }

  body:has(#home-view:not([hidden])) .search-panel {
    margin-top: -42px;
    padding: 20px;
  }

  body:has(#home-view:not([hidden])) .home-actions {
    margin-top: 20px;
  }

  body:has(#home-view:not([hidden])) .home-actions a {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 380px) {
  body:has(#home-view:not([hidden])) .search-panel {
    padding: 16px;
  }
}

/* Inicio definitivo: una composición clara, humana y orientada a la conexión. */
body:has(#home-view:not([hidden])) { background:#f5f7fa; color:#14243a; }
body:has(#home-view:not([hidden])) header { background:#fff; }
body:has(#home-view:not([hidden])) .home-hero { position:relative; overflow:hidden; background:#fff; padding:70px 0 86px; }
body:has(#home-view:not([hidden])) .home-hero::after { content:""; position:absolute; width:420px; height:420px; right:-110px; top:-190px; border:1px solid #e3eaf5; border-radius:50%; box-shadow:0 0 0 42px #f5f7fa,0 0 0 43px #e3eaf5; pointer-events:none; }
body:has(#home-view:not([hidden])) .home-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); align-items:center; gap:65px; position:relative; z-index:1; }
body:has(#home-view:not([hidden])) .home-hero-copy { max-width:650px; }
body:has(#home-view:not([hidden])) .home-hero-copy .eyebrow, body:has(#home-view:not([hidden])) .home-section-heading .eyebrow { color:#4263eb; }
body:has(#home-view:not([hidden])) .home-hero-copy .eyebrow::before, body:has(#home-view:not([hidden])) .home-section-heading .eyebrow::before { background:#4263eb; }
body:has(#home-view:not([hidden])) .home-hero-copy h1 { max-width:680px; color:#14243a; font-size:clamp(42px,5.4vw,70px); line-height:1.02; letter-spacing:-3.2px; margin:18px 0 20px; }
body:has(#home-view:not([hidden])) .home-hero-copy h1 span { color:#4263eb; }
body:has(#home-view:not([hidden])) .home-hero-copy > p { max-width:570px; color:#536173; font-size:18px; line-height:1.65; margin:0; }
body:has(#home-view:not([hidden])) .home-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }
body:has(#home-view:not([hidden])) .home-actions a { min-height:50px; border-radius:10px; padding:14px 20px; }
body:has(#home-view:not([hidden])) .home-actions .primary { background:#4263eb; box-shadow:0 10px 22px #4263eb26; }
body:has(#home-view:not([hidden])) .home-actions .primary:hover { background:#14243a; }
body:has(#home-view:not([hidden])) .home-secondary { border:1px solid #cdd8e7; background:#fff; color:#4263eb; }
body:has(#home-view:not([hidden])) .home-secondary:hover { border-color:#4263eb; background:#e3eaf5; }
body:has(#home-view:not([hidden])) .how-it-works-link { display:inline-flex; gap:8px; margin-top:22px; color:#536173; font-size:13px; font-weight:700; text-decoration:none; border-bottom:1px solid transparent; }
body:has(#home-view:not([hidden])) .how-it-works-link:hover { color:#4263eb; border-bottom-color:#4263eb; }
body:has(#home-view:not([hidden])) .home-hero-visual { min-height:405px; position:relative; border-radius:28px; background:linear-gradient(145deg,#e3eaf5 0%,#f5f7fa 63%,#fff 100%); overflow:hidden; }
body:has(#home-view:not([hidden])) .home-hero-visual::before { content:""; position:absolute; width:230px; height:230px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:#fff; box-shadow:0 18px 55px #14243a18; }
body:has(#home-view:not([hidden])) .hero-visual-orbit { position:absolute; border:1px solid #4263eb35; border-radius:50%; }
body:has(#home-view:not([hidden])) .hero-visual-orbit-one { width:330px; height:330px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(20deg); }
body:has(#home-view:not([hidden])) .hero-visual-orbit-two { width:430px; height:210px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-28deg); border-color:#14243a18; }
body:has(#home-view:not([hidden])) .hero-visual-card { position:absolute; display:flex; flex-direction:column; gap:5px; padding:14px 16px; background:#fff; border:1px solid #dce4ef; border-radius:14px; box-shadow:0 15px 32px #14243a14; color:#14243a; }
body:has(#home-view:not([hidden])) .hero-visual-card strong { font-size:13px; }
body:has(#home-view:not([hidden])) .hero-visual-card small { color:#6b7890; font-size:10px; line-height:1.35; }
body:has(#home-view:not([hidden])) .hero-visual-card-main { width:190px; left:50%; top:50%; transform:translate(-50%,-50%); padding:22px; }
body:has(#home-view:not([hidden])) .hero-visual-card-talent { left:8%; top:17%; }
body:has(#home-view:not([hidden])) .hero-visual-card-project { right:7%; bottom:17%; }
body:has(#home-view:not([hidden])) .hero-icon { display:grid; place-items:center; width:30px; height:30px; margin-bottom:3px; border-radius:9px; background:#e3eaf5; color:#4263eb; font-size:20px; font-weight:700; }
body:has(#home-view:not([hidden])) .hero-icon-spark { background:#4263eb; color:#fff; }
body:has(#home-view:not([hidden])) .hero-visual-line { position:absolute; width:75px; height:1px; background:#4263eb80; transform-origin:left center; }
body:has(#home-view:not([hidden])) .hero-visual-line-one { left:27%; top:31%; transform:rotate(24deg); }
body:has(#home-view:not([hidden])) .hero-visual-line-two { right:24%; bottom:30%; transform:rotate(-24deg); }
body:has(#home-view:not([hidden])) .home-content { padding:0 0 70px; }
body:has(#home-view:not([hidden])) .home-search-section { position:relative; margin-top:-1px; padding:68px 0 18px; }
body:has(#home-view:not([hidden])) .home-section-heading { max-width:650px; margin-bottom:25px; }
body:has(#home-view:not([hidden])) .home-section-heading h2 { color:#14243a; font-size:clamp(28px,3.5vw,40px); letter-spacing:-1.5px; margin:12px 0 8px; }
body:has(#home-view:not([hidden])) .home-section-heading p { color:#6b7890; font-size:15px; line-height:1.6; margin:0; }
body:has(#home-view:not([hidden])) .home-search-panel { margin:0; padding:0; border:1px solid #dce4ef; border-radius:18px; box-shadow:0 15px 40px #14243a0c; overflow:hidden; }
body:has(#home-view:not([hidden])) .search-mode-switch { display:flex; gap:4px; padding:8px; background:#f5f7fa; border-bottom:1px solid #e3eaf5; }
body:has(#home-view:not([hidden])) .search-mode-button { border:0; border-radius:10px; background:transparent; color:#6b7890; padding:12px 18px; font-size:13px; font-weight:750; cursor:pointer; }
body:has(#home-view:not([hidden])) .search-mode-button:hover { color:#4263eb; }
body:has(#home-view:not([hidden])) .search-mode-button.is-active { background:#fff; color:#14243a; box-shadow:0 3px 12px #14243a12; }
body:has(#home-view:not([hidden])) .search-fields { display:grid; grid-template-columns:1.25fr 1fr 1.25fr 1fr; gap:14px; padding:24px 24px 0; }
body:has(#home-view:not([hidden])) #opportunity-search-fields { grid-template-columns:1.4fr 1fr 1.25fr; }
body:has(#home-view:not([hidden])) .home-search-panel label { color:#536173; font-size:10px; letter-spacing:.07em; }
body:has(#home-view:not([hidden])) .home-search-panel input, body:has(#home-view:not([hidden])) .home-search-panel select { min-height:48px; background:#fff; border-color:#dce4ef; color:#14243a; border-radius:10px; }
body:has(#home-view:not([hidden])) .home-search-panel input:focus, body:has(#home-view:not([hidden])) .home-search-panel select:focus { border-color:#4263eb; box-shadow:0 0 0 3px #4263eb24; outline:none; }
body:has(#home-view:not([hidden])) .search-panel-actions { display:flex; align-items:center; gap:18px; padding:20px 24px 24px; }
body:has(#home-view:not([hidden])) .search-panel-actions .primary { min-height:48px; background:#4263eb; }
body:has(#home-view:not([hidden])) .search-panel-actions .reset { color:#4263eb; }
body:has(#home-view:not([hidden])) .how-it-works { padding:82px 0 20px; }
body:has(#home-view:not([hidden])) .how-it-works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
body:has(#home-view:not([hidden])) .how-step { position:relative; min-height:195px; padding:25px; border:1px solid #dce4ef; border-radius:16px; background:#fff; }
body:has(#home-view:not([hidden])) .how-step-number { position:absolute; top:22px; right:23px; color:#a5b4c7; font-size:11px; font-weight:800; letter-spacing:.1em; }
body:has(#home-view:not([hidden])) .how-step-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:24px; border-radius:13px; background:#e3eaf5; color:#4263eb; font-size:25px; }
body:has(#home-view:not([hidden])) .how-step h3 { margin:0 0 8px; color:#14243a; font-size:18px; }
body:has(#home-view:not([hidden])) .how-step p { max-width:230px; margin:0; color:#6b7890; font-size:13px; line-height:1.6; }
body:has(#home-view:not([hidden])) .home-closing { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:72px; padding:38px 42px; border-radius:20px; background:#14243a; color:#fff; }
body:has(#home-view:not([hidden])) .home-closing .eyebrow { color:#e3eaf5; }
body:has(#home-view:not([hidden])) .home-closing .eyebrow::before { background:#4263eb; }
body:has(#home-view:not([hidden])) .home-closing h2 { max-width:620px; margin:13px 0 0; color:#fff; font-size:clamp(25px,3vw,38px); letter-spacing:-1.2px; }
body:has(#home-view:not([hidden])) .home-closing .primary { flex:none; background:#fff; color:#4263eb; }
body:has(#home-view:not([hidden])) .home-closing .primary:hover { background:#e3eaf5; }
@media(max-width:950px) { body:has(#home-view:not([hidden])) .home-hero-grid { grid-template-columns:1fr; gap:42px; } body:has(#home-view:not([hidden])) .home-hero-copy { max-width:720px; } body:has(#home-view:not([hidden])) .home-hero-visual { min-height:330px; max-width:650px; } body:has(#home-view:not([hidden])) .search-fields { grid-template-columns:repeat(2,1fr); } body:has(#home-view:not([hidden])) #opportunity-search-fields { grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px) { body:has(#home-view:not([hidden])) .home-hero { padding:48px 0 55px; } body:has(#home-view:not([hidden])) .home-hero-copy h1 { font-size:clamp(38px,11vw,54px); letter-spacing:-2px; } body:has(#home-view:not([hidden])) .home-hero-copy > p { font-size:16px; } body:has(#home-view:not([hidden])) .home-actions { flex-direction:column; } body:has(#home-view:not([hidden])) .home-actions a { width:100%; justify-content:center; } body:has(#home-view:not([hidden])) .home-hero-visual { min-height:310px; border-radius:20px; } body:has(#home-view:not([hidden])) .hero-visual-card-main { width:170px; } body:has(#home-view:not([hidden])) .hero-visual-card-talent { left:5%; top:12%; } body:has(#home-view:not([hidden])) .hero-visual-card-project { right:5%; bottom:12%; } body:has(#home-view:not([hidden])) .home-search-section { padding-top:52px; } body:has(#home-view:not([hidden])) .search-mode-button { flex:1; padding:11px 8px; } body:has(#home-view:not([hidden])) .search-fields, body:has(#home-view:not([hidden])) #opportunity-search-fields { grid-template-columns:1fr; padding:20px 18px 0; } body:has(#home-view:not([hidden])) .search-panel-actions { padding:18px; flex-direction:column; align-items:stretch; gap:12px; } body:has(#home-view:not([hidden])) .search-panel-actions .primary { width:100%; } body:has(#home-view:not([hidden])) .how-it-works { padding-top:58px; } body:has(#home-view:not([hidden])) .how-it-works-grid { grid-template-columns:1fr; } body:has(#home-view:not([hidden])) .how-step { min-height:0; } body:has(#home-view:not([hidden])) .home-closing { align-items:flex-start; flex-direction:column; margin-top:55px; padding:28px 24px; } }

/* El formulario compartido conserva una distribución cómoda al vivir en resultados. */
#talent-view #filters .search-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
#talent-view #filters .search-panel-actions { display:flex; align-items:center; gap:16px; margin-top:17px; }
@media(max-width:950px) { #talent-view #filters .search-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) { #talent-view #filters .search-fields { grid-template-columns:1fr; } #talent-view #filters .search-panel-actions { flex-wrap:wrap; } }

body:has(#home-view:not([hidden])) .how-it-works { scroll-margin-top:24px; }
body:has(#home-view:not([hidden])) .home-hero-visual { min-height:430px; background:#e3eaf5; border:1px solid #dce4ef; box-shadow:0 22px 48px #14243a12; }
body:has(#home-view:not([hidden])) .home-hero-visual::before { width:300px; height:300px; background:#f5f7fa; box-shadow:0 20px 55px #14243a18; }
body:has(#home-view:not([hidden])) .home-hero-visual::after { content:""; position:absolute; inset:18px; border:1px solid #fff9; border-radius:20px; pointer-events:none; }
body:has(#home-view:not([hidden])) .hero-collage-backdrop { position:absolute; width:270px; height:340px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-7deg); border-radius:5px; background:#fff; box-shadow:0 18px 35px #14243a1c; }
body:has(#home-view:not([hidden])) .hero-collage { position:absolute; width:270px; height:340px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(5deg); padding:20px; border-radius:5px; background:#fff; box-shadow:0 22px 42px #14243a22; }
body:has(#home-view:not([hidden])) .hero-collage-topline, body:has(#home-view:not([hidden])) .hero-collage-footer { display:flex; justify-content:space-between; gap:12px; color:#536173; font-size:8px; letter-spacing:.12em; }
body:has(#home-view:not([hidden])) .hero-collage-topline { padding-bottom:14px; border-bottom:1px solid #dce4ef; }
body:has(#home-view:not([hidden])) .hero-collage-footer { align-items:flex-end; padding-top:14px; border-top:1px solid #dce4ef; letter-spacing:0; }
body:has(#home-view:not([hidden])) .hero-collage-footer strong { color:#14243a; font-size:15px; letter-spacing:-.04em; }
body:has(#home-view:not([hidden])) .hero-collage-footer span { max-width:90px; text-align:right; font-size:8px; line-height:1.3; }
body:has(#home-view:not([hidden])) .hero-collage-art { position:relative; height:250px; overflow:hidden; background:linear-gradient(135deg,#f5f7fa 0%,#e3eaf5 100%); }
body:has(#home-view:not([hidden])) .hero-collage-art::before { content:""; position:absolute; width:150px; height:150px; left:56px; top:45px; border:1px solid #4263eb66; border-radius:50%; }
body:has(#home-view:not([hidden])) .hero-person { position:absolute; bottom:16px; width:82px; height:175px; }
body:has(#home-view:not([hidden])) .hero-person-a { left:37px; transform:rotate(-5deg); }
body:has(#home-view:not([hidden])) .hero-person-b { right:31px; transform:scale(.86) rotate(7deg); transform-origin:bottom center; }
body:has(#home-view:not([hidden])) .hero-person-head { position:absolute; top:7px; left:23px; width:42px; height:48px; border-radius:48% 48% 44% 44%; background:#4263eb; }
body:has(#home-view:not([hidden])) .hero-person-b .hero-person-head { background:#14243a; }
body:has(#home-view:not([hidden])) .hero-person-body { position:absolute; bottom:0; left:3px; width:76px; height:126px; border-radius:44px 44px 18px 18px; background:#14243a; }
body:has(#home-view:not([hidden])) .hero-person-b .hero-person-body { background:#fff; border:1px solid #c8d5e5; }
body:has(#home-view:not([hidden])) .hero-collage-spark { position:absolute; right:28px; top:35px; color:#4263eb; font-size:30px; }
body:has(#home-view:not([hidden])) .hero-collage-connection { position:absolute; left:82px; top:108px; width:101px; height:46px; border-top:1px solid #4263eb; border-radius:50%; transform:rotate(-18deg); }
body:has(#home-view:not([hidden])) .hero-note { position:absolute; display:grid; grid-template-columns:30px 1fr; column-gap:8px; align-items:center; width:145px; padding:12px; border:1px solid #dce4ef; border-radius:12px; background:#fff; box-shadow:0 13px 28px #14243a16; }
body:has(#home-view:not([hidden])) .hero-note > span { grid-row:span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#4263eb; color:#fff; font-size:17px; }
body:has(#home-view:not([hidden])) .hero-note strong { color:#14243a; font-size:11px; }
body:has(#home-view:not([hidden])) .hero-note small { color:#6b7890; font-size:9px; line-height:1.25; }
body:has(#home-view:not([hidden])) .hero-note-talent { left:4%; top:15%; }
body:has(#home-view:not([hidden])) .hero-note-project { right:4%; bottom:15%; }
body:has(#home-view:not([hidden])) .home-hero-visual .hero-visual-orbit, body:has(#home-view:not([hidden])) .home-hero-visual .hero-visual-card, body:has(#home-view:not([hidden])) .home-hero-visual .hero-visual-line { display:none; }
@media(max-width:680px) { body:has(#home-view:not([hidden])) .home-hero-visual { min-height:360px; } body:has(#home-view:not([hidden])) .hero-collage { width:220px; height:280px; padding:16px; } body:has(#home-view:not([hidden])) .hero-collage-backdrop { width:220px; height:280px; } body:has(#home-view:not([hidden])) .hero-collage-art { height:202px; } body:has(#home-view:not([hidden])) .hero-person { transform:scale(.78) rotate(-5deg); transform-origin:bottom center; } body:has(#home-view:not([hidden])) .hero-person-b { transform:scale(.67) rotate(7deg); } body:has(#home-view:not([hidden])) .hero-note { width:125px; padding:9px; } body:has(#home-view:not([hidden])) .hero-note-talent { left:2%; top:10%; } body:has(#home-view:not([hidden])) .hero-note-project { right:2%; bottom:10%; } }